在 Angularjs 中使用 require 中的多个指令 [英] Using multiple directives in require with Angularjs

问题描述

我遇到了需要访问多个指令控制器方法的情况.

I have the situation where i need access to multiple directive controller methods.

我可以像这样使用 require 从父指令访问方法:

I can access a method from a parent directive using the require like so:

    require:"^parentDirective"

但我还需要访问一个单独的指令(不是父)中的方法，文档说像这样使用字符串数组:

but I also need to access a method within a seperate directive (not a parent), the documentation says to use an array of strings like so:

    require:["^parentDirective","directiveTwo"] 

但这样做会导致错误，尽管这两个指令都已编译为 DOM.

but doing this causes errors although the both directives have been compiled to the DOM.

我在这里遗漏了什么吗?

Am I missing something here?

这是我的指令:

    angular.module('testModule', ['parentModule'], function () {
    }).directive('testDirective', function() {
        return {
            restrict: 'AE',
            templateUrl: 'testTemplate.tpl.html',
            scope: {
                value1: "=",
                value2: "="
            },  
            require:['^parentDirective','otherDirective'],
            controller: function($scope,$modal,socketConnection) {

                if(case_x == true){
                    $scope.requiredController_1.ctrl1Func();
                }
                else if(case_x == false){
                    $scope.requiredController_2.ctrl2Func();
                }


            },
            link: function(scope,element,attrs,requiredController_1,requiredController_2){

                scope.requiredController_1 = requiredController_1;
                scope.requiredController_2 = requiredController_2;

            }

        };

    });

推荐答案

我认为这很接近您想要的(希望如此):

I think this is close to what you want (hopefully):

http://plnkr.co/edit/WO6SROdVFOYlR22JQJPb?p=preview

这里有一些想法:

1. 我认为 controller: function () {} 是在下行过程中执行的，而 link: function () {} 是在下行过程中执行的方式备份(发生在它沿着 DOM 树向下走之后)，这意味着您需要将依赖于其他控制器的代码从指令控制器移动到指令链接函数.

1. I think the controller: function () {} is executed on the way down, whereas the link: function () {} is executed on the way back up (which happens after it walks down the DOM tree), meaning you needed to move your code that depends on other controllers from the directive controller to the directive link function.

使用 require 的指令只能要求父元素(使用 ^)或当前元素上的指令.您的 html 中最初包含所有兄弟元素.如果需要，您需要将所有兄弟姐妹包装在第四个指令中，它们都require".

Directives that utilize require can only require directives on parent elements (using ^) or the current element. You had in your html, originally, your elements all siblings. If that needs to be the case you need to wrap all the siblings in a fourth directive that they all "require".

当你执行 require: [] 时，一个数组被传递到链接函数中.因此:

When you do require: [] an array is passed into the link function. Hence:

link: function(scope, element, attrs, controllers) {
  var parent1 = controllers[0];
  var other = controllers[1];
}

这能回答所有问题吗?

这篇关于在 Angularjs 中使用 require 中的多个指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！