Angular-UI Bootstrap组件实现警报

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

本文采用意译,版权归原作者所有

小编推荐:Fundebug专注于 JavaScript、微信小程序、微信小游戏,Node.js 和 Java 线上 bug 实时监控。真的是一个很好用的 bug 监控服务,众多大佬公司都在使用。

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 的介绍对你有所帮助。

关于Fundebug

Fundebug专注于JavaScript、微信小程序、支付宝小程序线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了80亿+错误事件。欢迎大家免费试用

版权声明

转载时请注明作者 Fundebug以及本文地址:
https://blog.fundebug.com/2018/07/13/bootstrap-alert-service-for-angular-js/

您的用户遇到BUG了吗?

体验Demo 免费使用