Angular-UI Bootstrap组件实现警报功能

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组件实现警报功能，希望对大家有所帮助