我要评论angular-ui bootstrap提供了许多组件，从流行的的bootstrap项目移植到angular 指令（显著的减少了代码量）。如果你计划在angular应用中使用bootstrap组件，我建议细心检查。话虽如此，直接使用bootstrap，应该也是可以工作的。
angular controller可以共享service的代码。警报就是把service代码共享到controller的很好用例之一。
angular-ui bootstrap文档提供了下面的例子：
view
<div ng-controller="alertdemoctrl">
<alert ng-repeat="alert in alerts" type="alert.type" close="closealert($index)">{{alert.msg}}</alert>
<button class='btn' ng-click="addalert()">add alert</button>
</div>
controller
function alertdemoctrl($scope) {
$scope.alerts = [
{ type: 'error', msg: 'oh snap! change a few things up and try submitting again.' },
{ type: 'success', msg: 'well done! you successfully read this important alert message.' }
];
$scope.addalert = function() {
$scope.alerts.push({msg: "another alert!"});
};
$scope.closealert = function(index) {
$scope.alerts.splice(index, 1);
};
}
鉴于我们要在app中的不同的控制器中创建警报，并且跨控制器的代码不好引用，我们将要把它移到service中。
alertservice
'use strict';
/* services.js */
// don't forget to declare this service module as a dependency in your main app constructor!
var appservices = angular.module('appapp.services', []);
appservices.factory('alertservice', function($rootscope) {
var alertservice = {};
// create an array of alerts available globally
$rootscope.alerts = [];
alertservice.add = function(type, msg) {
$rootscope.alerts.push({'type': type, 'msg': msg});
};
alertservice.closealert = function(index) {
$rootscope.alerts.splice(index, 1);
};
return alertservice;
});
view
<div>
<alert ng-repeat="alert in alerts" type="alert.type" close="closealert($index)">{{ alert.msg }}</alert>
</div>
最后，我们需要将alertservice's中的closealert()方法绑定到$globalscope。
controller
function rootctrl($rootscope, $location, alertservice) {
$rootscope.changeview = function(view) {
$location.path(view);
}
// root binding for alertservice
$rootscope.closealert = alertservice.closealert;
}
rootctrl.$inject = ['$scope', '$location', 'alertservice'];
我不完全赞同这种全局绑定，我希望的是直接从警报指令中的close data属性中调用service方法，我不清楚为什么不这样来实现。
现在创建一个警报只需要从你的任何一个控制器中调用alertservice.add()方法。
function arbitraryctrl($scope, alertservice) {
alertservice.add("warning", "this is a warning.");
alertservice.add("error", "this is an error!");
}
总结
以上所述是小编给大家介绍的angular-ui bootstrap组件实现警报功能，希望对大家有所帮助
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论