Javascript '；要求'；在AngularJS中的依赖于父指令的子指令中

我试图构造一个子指令，该子指令稍后将在多个指令中使用

这些父指令具有相同的控制器，该控制器提供了一些方法，我希望使用这些方法更新这些指令范围内的内容：

（以后可能会使用不同的控制器，但使用相同的常用方法）

myApp
.controller（'SomeCommonController'，function（）{
this.someMethod=函数（数据）{
//执行一些更新范围变量的操作
}
...
归还这个；
})
.directive（'myDir1'，function（）{
返回{
控制器：“SomeCommonController”，
模板：“”，
...
}
})
.directive（'myDir2'，function（）{
返回{
控制器：“SomeCommonController”，
模板：“与调用不同的内容”，
...
}
})
.directive（'subDir'，function（）{
返回{
作用域：{数据：='}
要求：“^something”，//父指令
模板：“”
链接：函数（作用域、元素、属性、parentDirectiveCtrl）{
scope.someMethod=函数（数据）{
parentDirectiveCtrl.someMethod（数据）；
};
},
...
}
})  

---

是否有一种方法只需要调用者指令的控制器？或者有更好的方法来实现相同的行为吗？

我认为没有任何方法可以动态地找到谁是父控制器（我的意思是说父指令）

我建议您将require与数组一起使用，这意味着在数组中提到您的require字段，如这里require将

require:['？^^myDir1'，'？^^mydir2']

然后在链接函数中第四个参数是controller，如果您

ctrl[0]

您可以获得

myDir1

的控制器&如果您这样做

ctrl[1]

然后您将获得

myDir2的控制器

您必须使用
？^^
，因为其中可能有一个不可用
存在于指令的父级

指令（'subDir'，函数（）{
返回{
作用域：{data:'=“}，
require:['？^^myDir1'，'？^^myDir2']，//父指令
模板：“”
链接：函数（作用域、元素、属性、parentDirectiveCtrl）{
如果（parentDirectiveCtrl[0]）
console.log（'父控制器是myDir1'）
if（parentDirectiveCtrl[1]）
console.log（'父控制器是myDir2'）
//每当您想要调用父指令的方法时
//然后，您应该对myDir1使用parentDirectiveCtrl[0]中的任何一个
//或myDir2的parentDirectiveCtrl[1]
scope.someMethod=函数（数据）{
parentDirectiveCtrl[0].someMethod（数据）；
};
},
...
}
})

我认为没有任何方法可以动态地找到谁是父控制器（我的意思是说父指令）

我建议您将require与数组一起使用，这意味着在数组中提到您的require字段，如这里require将

require:['？^^myDir1'，'？^^mydir2']

然后在链接函数中第四个参数是controller，如果您

ctrl[0]

您可以获得

myDir1

的控制器&如果您这样做

ctrl[1]

然后您将获得

myDir2的控制器

您必须使用
？^^
，因为其中可能有一个不可用
存在于指令的父级

指令（'subDir'，函数（）{
返回{
作用域：{data:'=“}，
require:['？^^myDir1'，'？^^myDir2']，//父指令
模板：“”
链接：函数（作用域、元素、属性、parentDirectiveCtrl）{
如果（parentDirectiveCtrl[0]）
console.log（'父控制器是myDir1'）
if（parentDirectiveCtrl[1]）
console.log（'父控制器是myDir2'）
//每当您想要调用父指令的方法时
//然后，您应该对myDir1使用parentDirectiveCtrl[0]中的任何一个
//或myDir2的parentDirectiveCtrl[1]
scope.someMethod=函数（数据）{
parentDirectiveCtrl[0].someMethod（数据）；
};
},
...
}
})

require

用于访问另一个指令的控制器（从而访问“API”），因此您需要明确指定所需的指令。否则，Angular怎么知道-可能有N个“父”指令。例如：

<parent ng-switch="abc" foo="123" bar>
  <child></child>
</parent>

如果没有，你可以得到父母，但你必须做一些手工工作。假设您知道父元素总是直接包含的元素，而元素标记（而不是属性）是指令。然后，您可以得到该指令的控制器，如下所示：

link: function(scope, element){
   var parentCtrlName = element.parent().prop("tagName").toLowerCase();
   var parentCtrl = element.parent().controller(parentCtrlName);

   if (parentCtrl){
     //
   }
}

---

require

用于访问另一个指令的控制器（从而访问“API”），因此您需要明确指定所需的指令。否则，Angular怎么知道-可能有N个“父”指令。例如：

<parent ng-switch="abc" foo="123" bar>
  <child></child>
</parent>

如果没有，你可以得到父母，但你必须做一些手工工作。假设您知道父元素总是直接包含的元素，而元素标记（而不是属性）是指令。然后，您可以得到该指令的控制器，如下所示：

link: function(scope, element){
   var parentCtrlName = element.parent().prop("tagName").toLowerCase();
   var parentCtrl = element.parent().controller(parentCtrlName);

   if (parentCtrl){
     //
   }
}

---

让容器父指令可以包含dir1或dir2如何；然后，dir1、dir2和subDir将通过container指令进行通信，当您使用需要在container指令中封装它们的指令集时，可以授予该指令集，但它为您带来了灵活性，它将允许您在不修改结构的情况下添加dir3

myApp
.controller('SomeCommonController', function() {
    this.someMethod = function(data) { 
        // do something for updating scope variables 
    }
    ...
    return this;
})
.directive('container', function() {
    return {
        controller: 'SomeCommonController',
        template : '<container></container>',
           ...
    }
})
.directive('myDir1', function() {
    return {
        require: '^container',
        link: function(scope, elem, attrs, parentDirectiveCtrl) {
            scope.someMethod = function(data) {
                parentDirectiveCtrl.someMethod(data);
            };
        },
        template : '<sub-dir ng-repeat="sth in aList" data="sth"></sub-dir>',
           ...
    }
})
.directive('myDir2', function() {
    return {
        ink: function(scope, elem, attrs, parentDirectiveCtrl) {
            scope.someMethod = function(data) {
                parentDirectiveCtrl.someMethod(data);
            };
        },
        template : 'Something Different with calling <sub-dir data="otherData"></sub-dir>',
           ...
    }
})
.directive('subDir', function() {
    return {
        scope: { data : "=" }
        require: '^^container',  // parent directive
        template: '<button ng-click="someMethod(data);"></button>'
        link: function(scope, elem, attrs, parentDirectiveCtrl) {
            scope.someMethod = function(data) {
                parentDirectiveCtrl.someMethod(data);
            };
        },
           ...
    }
})  

myApp
.controller（'SomeCommonController'，function（）{
this.someMethod=函数（数据）{
//执行一些更新范围变量的操作
}
...
归还这个；
})
.directive（'container'，function（）{
返回{
控制器：“SomeCommonController”，
te
myApp
.controller('SomeCommonController', function() {
    this.someMethod = function(data) { 
        // do something for updating scope variables 
    }
    ...
    return this;
})
.directive('container', function() {
    return {
        controller: 'SomeCommonController',
        template : '<container></container>',
           ...
    }
})
.directive('myDir1', function() {
    return {
        require: '^container',
        link: function(scope, elem, attrs, parentDirectiveCtrl) {
            scope.someMethod = function(data) {
                parentDirectiveCtrl.someMethod(data);
            };
        },
        template : '<sub-dir ng-repeat="sth in aList" data="sth"></sub-dir>',
           ...
    }
})
.directive('myDir2', function() {
    return {
        ink: function(scope, elem, attrs, parentDirectiveCtrl) {
            scope.someMethod = function(data) {
                parentDirectiveCtrl.someMethod(data);
            };
        },
        template : 'Something Different with calling <sub-dir data="otherData"></sub-dir>',
           ...
    }
})
.directive('subDir', function() {
    return {
        scope: { data : "=" }
        require: '^^container',  // parent directive
        template: '<button ng-click="someMethod(data);"></button>'
        link: function(scope, elem, attrs, parentDirectiveCtrl) {
            scope.someMethod = function(data) {
                parentDirectiveCtrl.someMethod(data);
            };
        },
           ...
    }
})