alert指令會在頁面上顯示一條提示消息，效果是這樣：
代碼為：
1 <!DOCTYPE html>
2 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <link href="/Content/bootstrap.css" rel="stylesheet" />
6 <title></title>
7
8 <script src="/Scripts/angular.js"></script>
9 <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
10 <script>
11
12 angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('AlertDemoCtrl', function ($scope) { 13 $scope.alerts = [ 14 { type: 'danger', msg: '出錯消息' }, 15 { type: 'success', msg: '成功消息' }, 16 { type: 'info', msg: '提示消息' }, 17 { type: 'warning', msg: '警告信息' } 18 ]; 19
20 $scope.addAlert = function () { 21 $scope.alerts.push({ msg: '這是一條消息!' }); 22 }; 23
24 $scope.closeAlert = function (index) { 25 $scope.alerts.splice(index, 1); 26 }; 27 $scope.addTplAlert = function () { 28
29 } 30 }); 31
32 </script>
33 <script type="text/ng-template" id="alert.html">
34 <div class="alert" style="background-color:#fa39c3;color:white" role="alert">
35 <div ng-transclude></div>
36 </div>
37 </script>
38
39 </head>
40 <body>
41 <div ng-controller="AlertDemoCtrl">
42 <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>
43 <button type="button" class='btn btn-default' ng-click="addAlert()">Add Alert</button>
44 <hr />
45 <uib-alert template-url="alert.html">一個使用自定義模板的警告框!</uib-alert>
46 </div>
47 </body>
48 </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