alert angularjs

向右看齐 2022-06-05 00:42 160阅读 0赞

# AngularJS 全局消息通告 service #

2013-10-15 22:24

[原文][Link 1]  [简体][Link 2]  [繁體][Link 3]

14,081 次围观

--------------------

在 AngularJS 中，Controller 之间可以共用的代码我们通常抽出来写成一个 Service。全局 Alert 消息系统就是一个很好的例子，比如“用户注册成功”、“添加商品成功”，每个 Controller 都有机会发出通告，这一部分功能应该写成独立模块。

[Angular-UI Bootstrap][] 项目提供了一系列的模块，将 Bootstrap 中的 component 转换为原生的 Angular directives，如果你正在同时使用 Bootstrap 和 AngularJS，那么强烈建议你使用它。

[![angularui-alert][]][angularui-alert]

在 Angular-UI Bootstrap 的文档里，有下面的例子来创建一个 alert：

View:

<table style="margin:0px; padding:0px; border-collapse:collapse; width:701px"> 
 <tbody style="margin:0px; padding:0px"> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:0px; border:0px; background-color:rgb(238,238,238); vertical-align:top"> <pre><code>&lt;div ng-controller="AlertDemoCtrl"&gt;
 &lt;alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)"&gt;{
 {alert.msg}}&lt;/alert&gt;
 &lt;button class='btn' ng-click="addAlert()"&gt;Add Alert&lt;/button&gt;
&lt;/div&gt;</code></pre> </td> 
 </tr> 
 </tbody> 
</table>

Controller:

<table style="margin:0px; padding:0px; border-collapse:collapse; width:644px"> 
 <tbody style="margin:0px; padding:0px"> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:0px; border:0px; background-color:rgb(238,238,238); vertical-align:top"> <pre><code>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.' }
 ];
&nbsp;
 $scope.addAlert = function() { 
 $scope.alerts.push({ msg: "Another alert!"});
 };
&nbsp;
 $scope.closeAlert = function(index) { 
 $scope.alerts.splice(index, 1);
 };
}</code></pre> </td> 
 </tr> 
 </tbody> 
</table>

假如说我们想要从很多不同的 Controller 发出 alert，那么像上面那样写就会导致跨 Controller 地调用函数，这属于 bad practice。我们将 alert 抽出来写成一个 Service ——

alertService:

<table style="margin:0px; padding:0px; border-collapse:collapse; width:761px"> 
 <tbody style="margin:0px; padding:0px"> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:0px; border:0px; background-color:rgb(238,238,238); vertical-align:top"> <pre><code>'use strict';
/* services.js */
&nbsp;
// 别忘记将本 service 依赖注入到你的 app
var appServices = angular.module('myApp.services', []);
&nbsp;
appServices.factory('alertService', function($rootScope) { 
 var alertService = { };
&nbsp;
 // 创建一个全局的 alert 数组
 $rootScope.alerts = [];
&nbsp;
 alertService.add = function(type, msg) { 
 $rootScope.alerts.push({ 'type': type, 'msg': msg, 'close': function(){ alertService.closeAlert(this); }});
 };
&nbsp;
 alertService.closeAlert = function(alert) { 
 alertService.closeAlertIdx($rootScope.alerts.indexOf(alert));
 };
&nbsp;
 alertService.closeAlertIdx = function(index) { 
 $rootScope.alerts.splice(index, 1);
 };
&nbsp;
 return alertService;
});</code></pre> </td> 
 </tr> 
 </tbody> 
</table>

下面这段 HTML 可以放到你的 index.html 模板里，或者 include 到所有的页面。  
View:

最后，创建一个全局的 alert 就只需要在你的任何 Controller 里面调用 `alertService.add()` 即可，非常方便。

[查看 Demo][Demo]

[Link 1]: https://www.lovelucy.info/angularjs-global-alert-service.html?variant=zh
[Link 2]: https://www.lovelucy.info/angularjs-global-alert-service.html?variant=zh-hans
[Link 3]: https://www.lovelucy.info/angularjs-global-alert-service.html?variant=zh-hant
[Angular-UI Bootstrap]: https://angular-ui.github.io/bootstrap/
[angularui-alert]: https://www.lovelucy.info/wordpress/wp-content/uploads/2013/10/angularui-alert.jpg
[Demo]: http://jsbin.com/UxapebE/1/edit?html,js,output