在使用多个指令要求与Angularjs [英] Using multiple directives in require with Angularjs

问题描述

我有，我需要访问多个指令的控制器方法的情况。

我可以从父指令使用需要像这样访问方式：

 要求：^ parentDirective
 

但我还需要一个单独的指令（不是父）内访问的方法，该文件说，到使用字符串数组像这样：

 要求：^ parentDirective，directiveTwo]
 

但是这样做会导致错误虽然这两个指令都被编译到DOM。

我失去了一些东西在这里？

这是我的指令：

  angular.module（'testModule'，['parentModule']，函数（）{
    }）指令（testDirective'，函数（）{
        返回{
            限制：AE，
            templateUrl：testTemplate.tpl.html'，
            范围： {
                值1：=，
                VALUE2：=
            }，
            要求：['^ parentDirective'，'otherDirective']，
            控制器：函数（$范围，$莫代尔，SocketConnection处）{                如果（case_x ==真）{
                    $ scope.requiredController_1.ctrl1Func（）;
                }
                否则，如果（case_x == FALSE）{
                    $ scope.requiredController_2.ctrl2Func（）;
                }
            }，
            链接：功能（范围，元素，ATTRS，requiredController_1，requiredController_2）{                scope.requiredController_1 = requiredController_1;
                scope.requiredController_2 = requiredController_2;            }        };    }）;
 

解决方案

我觉得这是接近你想要什么（希望）：

http://plnkr.co/edit/WO6SROdVFOYlR22JQJPb?p=$p$ PVIEW

下面是一些想法：

1. 我觉得控制器：功能（）{} 的方式被执行下去，而链接：功能（）{ } 在途中执行备份（这恰好它走下来DOM树之后），这意味着你需要将你的code依赖于其他控制器的指令控制器的指令链接功能。




2. 这是利用指令要求只能要求对父元素指令（使用 ^ ）或电流元件。你有你的HTML，原来，你的所有元素的兄弟姐妹。如果需要在你需要用的所有兄弟姐妹在第四个指令的情况下，他们都要求




3. 当你做要求：[] 数组传递到链接功能。因此：

    链接：功能（范围，元素，ATTRS，控制器）{
     变种parent1 =控制器[0];
     变种其它=控制器[1];
   }
    

这是否回答一切？

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

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"] 

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

Am I missing something here?

here is my directive:

    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

Here were some thoughts:

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.

2. 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".

3. 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];
   }
   

Does that answer everything?

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