我有两个指令
angular.module('myApp.directives', []).
directive('exampleDirective', ['version', function(version) {
return {
link:function(scope,elm,attr) {
elm.on('click',function() {
//access exampleDirective2 behaviour
});
}
}
}]).
directive('exampleDirective2', ['version', function(version) {
return {
link:function(scope,elm,attr) {
elm.on('change',function() {
//access exampleDirective behaviour
});
}
}
}]);
正如您在 exampleDirective elm.on(click) 函数中看到的那样,我想获取 exampleDirective2 函数,反之亦然。
AngularJS 有没有办法实现这个?
最佳答案
这个问题有三种解决方案:
第一个解决方案:使用服务
在指令之间共享可以包含数据和函数的服务。
.service('myService', function(){
this.data = //....
this.function = function() //...
})
.directive('dir1', ['myService', function(myService) {
//...
link: function(scope, elem, attrs) {
scope.data = myService.data;
}
}])
其他指令也一样。
第二种解决方案:指令的 Controller
如果您的指令具有父/子/兄弟关系:
.directive('dir1', function(){
return {
controller: function(scope, elem, attrs) {
this.sayHello = function() {
alert('hello')
}
}
}
})
.directive('dir2', function(){
return {
require: '^dir1',
link: function(scope, elem, attrs, dir1Ctrl) {
dir1Ctrl.sayHello(); //will alert hello
}
}
})
但是,如果您的指令具有隔离作用域,这将不起作用。此外,根据指令的关系(父/子或兄弟),require
属性的语法会略有变化;您可以在有关指令的 AngularJS 文档中找到更多信息。
方案三:使用事件
您还可以从指令范围发出/广播事件,或注入(inject) $rootScope
并将其用作事件总线:
.directive('dir1', function($rootScope){
return {
link: function(scope, elem, attrs) {
var emitEvent = function(){
$rootScope.$emit('somethingHappenedEvent', { /*you can pass optional data*/ });
}
emitEvent();
}
}
})
.directive('dir2', function($rootScope) {
return {
link: function(scope, elem, attrs) {
$rootScope.$on('somethingHappenedEvent', function(event) {
if(!event.defaultPrevented) {
//react to event here
}
})
}
}
})
你也可以使用普通的 scope
而不是 $rootScope
,但在那种情况下你必须记住事件会冒泡/向下所有范围(取决于 $emit
或 $broadcast
的使用)。我更喜欢从 $rootScope
中使用 $emit
,因为它将是唯一能够捕获事件的范围,而且速度也相当快。
关于javascript - 让两个自定义指令在 AngularJS 中相互交互,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24568709/