内容简介:摘要:如何有效利用Angular.js service实现警报Angular controller可以共享service的代码。警报就是把service代码共享到controller的很好用例之一。
摘要:如何有效利用Angular.js service实现警报
- 原文: Angular-UI Bootstrap alert service for Angular.js
- 译者:Fundebug
为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。
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.js services的介绍对你有所帮助。
版权声明: 转载时请注明作者<b><a href="https://fundebug.com" target="_blank" title="Fundebug">Fundebug</a></b>以及本文地址: <b><a href="https://blog.fundebug.com/2018/07/13/bootstrap-alert-service-for-angular-js/" target="_blank" title="Angular-UI Bootstrap组件实现警报">https://blog.fundebug.com/2018/07/13/bootstrap-alert-service-for-angular-js/</a></b>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- Oracle AWR与警报系统
- CVE-2019-5736: runc容器逃逸漏洞警报
- 警报!黑客、羊毛党和矿工正在入侵EOS
- CVE-2019-9193,PostgreSQL任意代码执行漏洞警报
- javascript – 在jQuery中显示警报几秒钟然后淡出
- HITB | 360议题分享:卫星可欺骗 地震警报可伪造
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
The Art of Computer Programming, Volume 3
Donald E. Knuth / Addison-Wesley Professional / 1998-05-04 / USD 74.99
Finally, after a wait of more than thirty-five years, the first part of Volume 4 is at last ready for publication. Check out the boxed set that brings together Volumes 1 - 4A in one elegant case, and ......一起来看看 《The Art of Computer Programming, Volume 3》 这本书的介绍吧!