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. Google Maps地图投影全解析(3)：WKT形式表示

    update20090601:EPSG对该投影的编号设定为EPSG:3857,对应的WKT也发生了变化,下文不再修改,相对来说格式都是那样,可以到http://www.epsg-registry.or ...

  2. iOS tabBar双击事件

    思路: 在tabBarController的代理方法 shouldSelectViewController 中, 通过判断tabBar选中的控制器是否是当前控制器 并 比对两次点击的时间间隔 来判断是 ...

  3. 2017 New Year’s Greetings from Sun Yat-sen University

    As winter turns to spring, the world around us begins to take on an air of freshness. As  2017 is fa ...

  4. React 学习资源汇总（最全的 React 学习资料）

    http://www.360doc.com/content/16/1108/10/17722897_604827790.shtml

  5. eclipse svn提交报错

    修改文件格式:右键-properties-text file encoding-other UTF-8

  6. 开源代码Window下搭建rtmp流媒体服务器

    合肥程序员群:49313181. 合肥实名程序员群:128131462 (不愿透露姓名和信息者勿加入) Q Q:408365330 E-Mail:egojit@qq.com 综合:有这样需求,将摄像头 ...

  7. 面试中常用的__proto__,prototype和原型链，你都了解了吗？

    上一篇随笔主要讲了变量提升的问题,今天我们来讲讲很多前端er在初期很长一段时间内都没有完全搞明白的原型链和构造函数. 1,什么是构造函数 那么要讲到构造函数,必须要有一个函数,所以我们建立一个函数 f ...

  8. 使用tomcat部署jsp程序

    安装java1.6.0到默认目录 下载apache-tomcat-6.0.32-windows-x86.zip,解压到D:\soft目录下 配置环境变量 JAVA_HOME C:\Program Fi ...

  9. systemctl命令用法详解

    systemctl命令用法详解系统环境:Fedora 16binpath:/bin/systemctlpackage:systemd-units systemctl enable httpd.serv ...

  10. MVC 路由介绍

    我们新建一个ASP.NET MVC Web程序的时候,会生成一个Global.asax文件.如下: using System; using System.Collections.Generic; us ...