AngularJS - 单个警报格为多个控制器 [英] AngularJS - single alert div for multiple controllers
问题描述
我想有一个自举3警报显示一般错误或成功的消息对所有用户可以在页面上执行的操作。该页面在不同的章节划分，每款不同的控制器，这样的事情：
I want to have a single bootstrap 3 alert to show general error or success messages for all the operations a user can perform on a page. The page is divided in different sections with different controllers per section, something like this:
<body ng-app="app">
<div ng-controller="securityController">
[controller methods for change password, validate user section, ...]
<div ng-controller="salesController">
<div class="alert" ng-show="message.visible"><strong>{{message.title}}</strong>{{message.text}}</div></div>
[controller methods for admin sales, admin products, admin retails, ...]
</div>
</div>
</body>
然后，我希望能够给这个网站绑定到谁想要显示一条消息，控制器的所有车型，当用户进行页面的动作（当它与securityController方法，验证信息时进行交互EJ。安全消息它salesController方法进行交互）
Then I want to be able to bind this html to all the models in the controllers who want to show a message when a user performs an action in the page (Ej. security messages when it interacts with securityController methods, validation messages when it interacts with salesController methods)
首先，我认为级联控制器，使他们有在警报HTML使用可以工作绑定变量的名称模型（EJ。具有securityController和salesController一个$ scope.message对象），但它并没有工作，我真的不认为这是正确的做法。
First I thought that cascading the controllers and making them have models with the name of the binding variables used in the alert HTML could work (Ej. having a $scope.message object in securityController and in salesController) but it didn't work and I don't really think that is the correct approach.
我怎样才能做到这一点？
How can I achieve this?
推荐答案
下面是我为我的应用程序的一个书面样本code。
Here is a sample code which I had written for one of my app.
演示： http://plnkr.co/edit/pGhKOTtqFxpD4fukhQrl?p=preVIEW
指令：
app.directive('alert', function(alertService) {
return {
restrict: 'AE',
link: function(scope, e, a, ctl) {
scope.alert = alertService.alertObj;
},
template: '<div class="alert" ng-class="alert.type" ng-show="alert.show">{{alert.msg}}</div>'
};
});
服务：链接多个控制器的指令
app.service('alertService', function() {
var me = this;
me.alertObj = {
show: false,
msg: '',
type: 'alert-success'
};
me.alertShow = false;
me.alertTypes = ['alert-success', 'alert-info', 'alert-warning', 'alert-danger'];
me.alert = function(type, msg) {
me.alertObj.msg = msg;
me.alertObj.type = me.alertTypes[type];
me.alertObj.show = true;
};
me.success = function(msg) {
me.alert(0, msg);
};
me.info = function(msg) {
me.alert(1, msg);
};
me.warning = function(msg) {
me.alert(2, msg);
};
me.danger = function(msg) {
me.alert(3, msg);
};
me.hide = function() {
console.log('hiding');
me.alertObj.show = false;
};
return this;
});
控制器：采样器
app.controller('ctl1', function($scope, alertService) {
$scope.name = 'World';
$scope.showAlert = function() {
alertService.success("This is an success alert");
};
});
HTML
<alert></alert>
<div ng-controller="ctl1">
<button ng-click="showAlert()">ctl1 - Success alert</button>
</div>
<div ng-controller="ctl2">
<button ng-click="showAlert()">ctl2 - Warning alert</button>
</div>
<div ng-controller="ctl3">
<button ng-click="showAlert()">ctl3 - Danger alert</button>
</div>
<div ng-controller="ctl4">
<button ng-click="showAlert()">ctl4 - Info alert</button>
<button ng-click="hide()">Clear Alert</button>
</div>
这篇关于AngularJS - 单个警报格为多个控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
