alert指令会在页面上显示一条提示消息，效果是这样：

代码为：

 <!DOCTYPE html>

 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <link href="/Content/bootstrap.css" rel="stylesheet" />

     <title></title>

     <script src="/Scripts/angular.js"></script>

     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>

     <script>

         angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('AlertDemoCtrl', function ($scope) {

             $scope.alerts = [

               { type: 'danger', msg: '出错消息' },

               { type: 'success', msg: '成功消息' },

             { type: 'info', msg: '提示消息' },

             { type: 'warning', msg: '警告信息' }

             ];

             $scope.addAlert = function () {

                 $scope.alerts.push({ msg: '这是一条消息!' });

             };

             $scope.closeAlert = function (index) {

                 $scope.alerts.splice(index, 1);

             };

             $scope.addTplAlert = function () {

             }

         });

     </script>

     <script type="text/ng-template" id="alert.html">

         <div class="alert" style="background-color:#fa39c3;color:white" role="alert">

             <div ng-transclude></div>

         </div>

     </script>

 </head>

 <body>

     <div ng-controller="AlertDemoCtrl">

         <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>

         <button type="button" class='btn btn-default' ng-click="addAlert()">Add Alert</button>

         <hr />

         <uib-alert template-url="alert.html">一个使用自定义模板的警告框!</uib-alert>

     </div>

 </body>

 </html>

alert指令可以使用的属性有：

属性名 默认值 备注
close   提示消息关闭时所触发的函数。如果有这个属性，提示消息的右侧会添加一个关闭按钮
dismiss-on-timeout none 在有close属性的前提下，设置一个自动关闭提示消息的时间（毫秒）
template-url uib/template/alert/alert.html  
type warning 提示消息的类型。可配置的值有：danger，warning，info，success

目录：

AngularJs的UI组件ui-Bootstrap分享（一）

AngularJs的UI组件ui-Bootstrap分享（二）——Collapse

AngularJs的UI组件ui-Bootstrap分享（三）——Accordion

AngularJs的UI组件ui-Bootstrap分享（四）——Datepicker Popup

AngularJs的UI组件ui-Bootstrap分享（五）——Pager和Pagination

AngularJs的UI组件ui-Bootstrap分享（六）——Tabs

AngularJs的UI组件ui-Bootstrap分享（七）——Buttons和Dropdown

AngularJs的UI组件ui-Bootstrap分享（八）——Tooltip和Popover

AngularJs的UI组件ui-Bootstrap分享（九）——Alert

AngularJs的UI组件ui-Bootstrap分享（十）——Model

AngularJs的UI组件ui-Bootstrap分享（十一）——Typeahead

AngularJs的UI组件ui-Bootstrap分享（十二）——Rating

AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar

AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

AngularJs的UI组件ui-Bootstrap分享（九）——Alert的更多相关文章

  1. Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合 侧边栏 ion-menu

    1.侧边栏 ion-menu 组件的基本使用 1.创建项目 ionic start myApp sidemenu 2.配置项目 属性 作用 可选值 side 配置侧边栏的位置 start end me ...

  2. Ionic4.x 中的 UI 组件(UI Components) 日期组件

    1.日期组件的基本使用 官方文档:https://ionicframework.com/docs/api/datetime 模板中: <ion-datetime display-format=& ...

  3. Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件

    Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...

  4. Ionic4.x 中的 UI 组件(UI Components)表单相关组件

    1.ion-input 单行文本框 2.ion-toggle 开关 3.ion-radio-group.ion-radio 单选按钮组 4.ion-checkbox 多选按钮组 5.ion-selec ...

  5. 挂号平台首页开发（UI组件部分）

    JQ插件模式开发UI组件 JQ插件开发方法: 1.$.extend() 扩展JQ(比较简单,功能略显不足) $.extend({ sayHello:function(){ console.log(&q ...

  6. AngularJs的UI组件ui-Bootstrap分享（一）

    最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得. 目录: AngularJs的UI组件ui-Bootstrap分享(一) A ...

  7. AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

    Carousel指令是用于图片轮播的控件,引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件. <!DOCTYPE html> <html ng-app="ui ...

  8. AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar

    进度条控件有两种指令,第一种是uib-progressbar指令,表示单一颜色和进度的一个进度条.第二种是uib-bar和uib-progress指令,表示多种颜色和多个进度组合而成的一个进度条. 这 ...

  9. AngularJs的UI组件ui-Bootstrap分享（十二）——Rating

    Rating是一个用于打分或排名的控件.看一个最简单的例子: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" x ...

随机推荐

  1. POI 解析xls

    1.所需jar包 poi-3.6.jar poi-ooxml-3.6.jar 2.M.java package junit; import java.io.FileInputStream; impor ...

  2. django框架代码基础

    urls.py 导入相对应的模块from django.conf.urls import url,includefrom django.contrib import adminfrom son1.vi ...

  3. Deep Learning 25：读论文“Network in Network”——ICLR 2014

    论文Network in network (ICLR 2014)是对传统CNN的改进,传统的CNN就交替的卷积层和池化层的叠加,其中卷积层就是把上一层的输出与卷积核(即滤波器)卷积,是线性变换,然后再 ...

  4. ToolBar 修改边距

    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android ...

  5. union内嵌struct用法

      // union内嵌struct用法 // 众所周知,union为联合体,struct为结构体.下面根据实例谈谈用法   #include <stdio.h>   #include & ...

  6. 2016年12月31日 学习java 第一天

    6个月没写代码了 现在从头开是学 又遇到了很基础的问题 以前配环境变量的时候  配过classpath  其实不要配classpath  因为运行的时候会优先去classpath去找 class文件  ...

  7. MySQL 显示版本、端口、状态

    status select version() show global variables like 'port'

  8. web api+递归树型结构

    using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Ne ...

  9. Java—Servlet技术

    1  Servlet 概述 Servlet简介——开发动态web资源的技术Sun公司在API提供了一个servlet接口,如开发一个java程序向浏览器输出数据:1)编写一个java类,实现servl ...

  10. MVC5+EF6 入门完整教程八

    本篇是相对独立的一篇,主要讲解不丢失数据进行数据库结构升级. 前面我们讲解EF功能时,已经介绍过一种更新数据库的方式: EF比较model和database,如果两边不一致,程序将会drop and ...