標籤：按鈕 charset ble 頁面 ui組件 mod 預設 tde 效果
原文地址：http://www.cnblogs.com/pilixiami/p/5699573.html
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分享（九）——Alert
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
