我有这两个指令,一个相互嵌套:
<envato class="container content-view-container" data-ng-cloak data-ng-hide="spinner">
<items data-ng-repeat="items in marketplaces"></items>
</envato>
这两个都是这样定义的:
Application.Envato.directive("envato", ["$timeout", function($timeout){
var object = {
restrict : "E",
controller : "EnvatoAPIController",
transclude : true,
replace : true,
templateUrl : "templates/envato-view.php",
link : function(scope, element, attrs, controller) {
console.log(scope);
return controller.getLatestItems().then(function(data) {
scope.marketplaces = angular.fromJson(data);
scope.count = scope.marketplaces.length;
var tst = angular.element(element).find(".thumbnails");
/* $timeout(function() { scope.swiper = new Swipe(document.getElementById('swiper-container')); }, 5000); */
scope.spinner = false;
});
}
};
return object;
}]);
Application.Envato.directive("items", function(){
var iterator = [],
object = {
require : "^envato",
restrict : "E",
transclude : false,
replace : true,
templateUrl : "templates/envato-items-view.php",
link : function(scope, element, attrs, controller) {
iterator.push(element);
if (iterator.length === scope.$parent.$parent.count) { console.log(iterator); };
}
};
return object;
});
上面的很多代码可能没有多大意义,因为它们是更大应用程序的一部分,但我希望它能解决我的问题。我正在尝试做的是从指令 items
更改指令 envato
的范围属性。因为我有一个迭代并且我想知道它何时完成,所以我可以在该迭代期间对附加的 DOM 元素执行另一个操作。
例如,假设我将在指令 envato
中定义 scope.swipe
,并观察它的变化。在指令 items
中,我将观察 ng-repeat
何时完成,然后更改上面定义的范围属性 scope.swipe
。这将触发指令 envato
内的更改,现在我知道我可以执行操作了。
我希望我已经足够清楚了,否则我可以尝试编写更多代码,或者我会尝试更具体一些。我怎样才能实现我刚才描述的目标?
编辑: 我确实知道使用:console.log(angular.element(element.parent()).scope());
在指令 items
会给我 envato
指令的范围,但我想知道是否有更好的方法。
最佳答案
对于这种指令间通信,我建议在您的 envato
指令上定义一个 API/方法,以便您的 items
指令可以调用。
var EnvatoAPIController = function($scope) {
...
this.doSomething = function() { ... }
}
你的items
指令已经require
了envato
指令,所以在你的items
指令的链接函数中,只需在适当的时候调用 API:
require : "^envato",
link : function(scope, element, attrs, EnvatoCtrl) {
...
if(scope.$last) {
EnvatoCtrl.doSomething();
}
}
这种方法的优点在于,即使有一天您决定在指令中使用隔离作用域,它也能发挥作用。
AngularJS 主页上的tabs
和pane
指令使用这种通信机制。参见 https://stackoverflow.com/a/14168699/215945了解更多信息。另见约翰的 Directive to Directive Communication video .
关于javascript - 在指令中访问父范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15187089/