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

Angular-UI Bootstrap提供了许多组件，从流行的的Bootstrap项目移植到Angular 指令（显著的减少了代码量）。如果你计划在Angular应用中使用Bootstrap组件，我建议细心检查。话虽如此，直接使用Bootstrap，应该也是可以工作的。

Angular controller可以共享service的代码。警报就是把service代码共享到controller的很好用例之一。

Angular-UI Bootstrap文档提供了下面的例子：

view

rush:js;">

Dalert()">Add Alert

controller

rush:js;"> 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

rush:js;"> '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

rush:js;">

最后，我们需要将alertService's中的closeAlert()方法绑定到$globalScope。

controller

rush:js;"> 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()方法。

rush:js;"> function ArbitraryCtrl($scope,alertService) { alertService.add("warning","This is a warning."); alertService.add("error","This is an error!"); }

总结

以上所述是小编给大家介绍的Angular-UI Bootstrap组件实现警报功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。