从其他控制器指令控制器AngularJS调用方法 [英] AngularJS call method in directive controller from other controller
问题描述
我试图找出这一个,但它似乎谷歌今天是不是我的朋友,所以我要在这里问你们。基本上,我有了自己的控制器指令。请参见下面的code:
I am trying to figure this one out but it seems google is not my friend today so I'm going to ask you guys here. Basically I have a directive that has its own controller. See the below code:
var popdown = angular.module('xModules',[]);
popdown.directive('popdown', function () {
var PopdownController = function ($scope) {
this.scope = $scope;
}
PopdownController.prototype = {
show:function (message, type) {
this.scope.message = message;
this.scope.type = type;
},
hide:function () {
this.scope.message = '';
this.scope.type = '';
}
}
var linkFn = function (scope, lElement, attrs, controller) {
};
return {
controller: PopdownController,
link: linkFn,
replace: true,
templateUrl: './partials/modules/popdown.html'
}
});
这是命中注定的错误/通知/警告,通报制度。我想要做的是从另一个控制器(未指令的)来调用这个控制器上的性能表现。当我这样做,我也希望我的链接功能来检测改变了一些特性,并执行一些动画。
This is meant to be a notification system for errors/notifications/warnings. What I want to do is from another controller (not a directive one) to call the function show on this controller. And when I do that I would also want my link function to detect that some properties changed and perform some animations.
下面是一些code至举例说明我所要求的:
Here is some code to exemplify what I'm asking for:
var app = angular.module('app', ['RestService']);
app.controller('IndexController', function($scope, RestService) {
var result = RestService.query();
if(result.error) {
popdown.notify(error.message, 'error');
}
});
所以,当调用显示
的被弹
指令控制器上的链接功能也应引发并执行动画。我怎么能做到这一点?
So when calling show
on the popdown
directive controller the link function should also be triggered and perform an animation. How could I achieve that?
推荐答案
这是一个有趣的问题,我开始思考我将如何实现这样的事情。
This is an interesting question, and I started thinking about how I would implement something like this.
我想出了这个(小提琴);
基本上,而不是试图调用来自控制器的指令,我创建了一个模块来容纳所有的被弹逻辑:
Basically, instead of trying to call a directive from a controller, I created a module to house all the popdown logic:
var PopdownModule = angular.module('Popdown', []);
我把两件事情在模块中,一个工厂
为它可以在任何地方被注入的API,以及指令
用于限定实际弹下元件的行为:
I put two things in the module, a factory
for the API which can be injected anywhere, and the directive
for defining the behavior of the actual popdown element:
工厂只定义了几个功能成功
和错误
并跟踪了几个变量:
The factory just defines a couple of functions success
and error
and keeps track of a couple of variables:
PopdownModule.factory('PopdownAPI', function() {
return {
status: null,
message: null,
success: function(msg) {
this.status = 'success';
this.message = msg;
},
error: function(msg) {
this.status = 'error';
this.message = msg;
},
clear: function() {
this.status = null;
this.message = null;
}
}
});
该指令获取注入其控制的API,以及手表变化的API(我使用的方便引导CSS):
The directive gets the API injected into its controller, and watches the api for changes (I'm using bootstrap css for convenience):
PopdownModule.directive('popdown', function() {
return {
restrict: 'E',
scope: {},
replace: true,
controller: function($scope, PopdownAPI) {
$scope.show = false;
$scope.api = PopdownAPI;
$scope.$watch('api.status', toggledisplay)
$scope.$watch('api.message', toggledisplay)
$scope.hide = function() {
$scope.show = false;
$scope.api.clear();
};
function toggledisplay() {
$scope.show = !!($scope.api.status && $scope.api.message);
}
},
template: '<div class="alert alert-{{api.status}}" ng-show="show">' +
' <button type="button" class="close" ng-click="hide()">×</button>' +
' {{api.message}}' +
'</div>'
}
})
然后我定义依赖于应用
模块被弹
:
var app = angular.module('app', ['Popdown']);
app.controller('main', function($scope, PopdownAPI) {
$scope.success = function(msg) { PopdownAPI.success(msg); }
$scope.error = function(msg) { PopdownAPI.error(msg); }
});
和HTML如下:
And the HTML looks like:
<html ng-app="app">
<body ng-controller="main">
<popdown></popdown>
<a class="btn" ng-click="success('I am a success!')">Succeed</a>
<a class="btn" ng-click="error('Alas, I am a failure!')">Fail</a>
</body>
</html>
我不知道这是否是完全理想,但它似乎想建立一个全球十岁上下弹下指令通信一种合理的方式。
I'm not sure if it's completely ideal, but it seemed like a reasonable way to set up communication with a global-ish popdown directive.
再次参考,小提琴。
这篇关于从其他控制器指令控制器AngularJS调用方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!