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组件实现警报功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！