欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-09 12:48:56
angular-ui bootstrap提供了许多组件,从流行的的bootstrap项目移植到angular 指令(显著的减少了代码量)。如果你计划在angular应用中使...

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