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. iOS - CoreData 数据库存储

    1.CoreData 数据库 CoreData 是 iOS SDK 里的一个很强大的框架,允许程序员以面向对象的方式储存和管理数据.使用 CoreData 框架,程序员可以很轻松有效地通过面向对象的接 ...

  2. 3D立体照片墙

    代码如下:   <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...

  3. springmvc 用注解方式添加事务不生效解决方法

    springmvc 事务注册有很多种方法,在此我只mark 用注解方式添加transaction不生效的解决办法. springmvc 注解方法添加事务步骤: 1.在 spring的 root-con ...

  4. Surface与SurfaceView、SurfaceHolder

    什么是Surface? android API的解释是:Handle onto a raw buffer that is being managed by the screen compositor ...

  5. .net(C#)在vs2010版本下的MVC如何配置才能切换静态页面（html）

    由于vs2010用的人比较多,虽然建mvc项目vs2010可能还不成熟,但鉴于每个人的成长有限,每个地方的资源有限,最主要的是为了解决问题,所以先不管那么多了. 用vs2010为公司网站建站,要求js ...

  6. CIDR风格

    CIDR地址中包含标准的32位IP地址和有关网络前缀位数的信息. eg: 地址:192.168.10.0/24,其中/24标示前面地址中的前24位代表网络部分,其余代表主机部分. 11000000 1 ...

  7. java怎么定义一个二维数组？

    java中使用 [][] 来定义二维数组 定义数组时也可同时初始化下面是一些例子float[][] numthree; //定义一个float类型的2维数组numthree=new float[5][ ...

  8. O2O、C2C、B2B、B2C的区别

    一.O2O.C2C.B2B.B2C的区别在哪里? o2o 是 online to offline 分为四种运营模式 1.online to offline 是线上交易到线下消费体验 2.offline ...

  9. trim()，正则表达式中文匹配

    ^[/u4E00-/u9FA5]+$ 匹配中文 验证Email地址:“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$”  验证InternetURL:“^http://([ ...

  10. MyBatis总结（一）

    一.创建测试项目工程 二.导包(一个myBatis所需的包,以及一个数据库操作的包) 三.创建实体类 四.配置文件的建立(最佳命名为(SqlMapConfig.xml)) <?xml versi ...