javascript - 在指令中访问父范围

Question

我有这两个指令，一个相互嵌套:

<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 指令的范围，但我想知道是否有更好的方法。

Answer 1

对于这种指令间通信，我建议在您的 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 .