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