1

Angular-UI Bootstrap组件实现警报

Fundebug 2018年07月13日 发布于前端 blog.fundebug.com

如何有效利用Angular.js service实现警报

Angular-UI Bootstrap组件实现警报

2018年07月13日 发布,来源:blog.fundebug.com

摘要 :如何有效利用Angular.js service实现警报

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

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

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

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

view

<div ng-controller=&quot;AlertDemoCtrl&quot;>
<alert ng-repeat=&quot;alert in alerts&quot; type=&quot;alert.type&quot; close=&quot;closeAlert($index)&quot;>{{alert.msg}}</alert>
<button class='btn' ng-click=&quot;addAlert()&quot;>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: &quot;Another alert!&quot;});
};

$scope.closeAlert = function(index) {
$scope.alerts.splice(index, 1);
};
}

鉴于我们要在app中的不同的控制器中创建警报,并且跨控制器的代码不好引用,我们将要把它移到service中。

alertService

;




var appServices = angular.module('appApp.services', []);

appServices.factory('alertService', function($rootScope) {
var alertService = {};


$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=&quot;alert in alerts&quot; type=&quot;alert.type&quot; close=&quot;closeAlert($index)&quot;>{{ alert.msg }}</alert>
</div>

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

controller

function RootCtrl($rootScope, $location, alertService) {
$rootScope.changeView = function(view) {
$location.path(view);
}


$rootScope.closeAlert = alertService.closeAlert;
}
RootCtrl.$inject = ['$scope', '$location', 'alertService'];

我不完全赞同这种全局绑定,我希望的是直接从警报指令中的close data属性中调用service方法,我不清楚为什么不这样来实现。

现在创建一个警报只需要从你的任何一个控制器中调用alertService.add()方法。

function ArbitraryCtrl($scope, alertService) {
alertService.add(&quot;warning&quot;, &quot;This is a warning.&quot;);
alertService.add(&quot;error&quot;, &quot;This is an error!&quot;);
}

希望这篇对Angular.js services的介绍对你有所帮助。

934 浏览 2 收藏 报告 阅读模式
载入中...