javascript - Angular 指令 - 需要从指令 Controller 访问所需的 Controller

Question

我正在编写一个 Angular “制表符”指令，它需要通过将对自身的引用发送给父级来与父级“制表符”指令进行通信。

我试图将我的代码保留在指令的 Controller 中，而不是链接函数中，因为我实际上并没有对 DOM 做任何事情。

问题是，如果我使用 {require: '^tabs'} 我可以像这样获得所需指令的 Controller 的副本..

link: function(scope, element, attr, ctrls) {
    var controller = ctrls[0];
}

但是我如何在指令的 Controller 函数中执行此操作？

Answer 1

这对我来说一直是个有趣的问题。我喜欢认为我对这种常见情况的解决方案是在狂野的一面。

首先，我回到 Angular 样式指南 (https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#controlleras-controller-syntax) 中建议的 controllerAs View 语法

使用此语法，您可以将指令定义为:

    var directive = {
        require: '^myParentDirective',
        restrict: 'EA',
        controller: 'MyController as myCtrl',
        templateUrl: 'super/awesome/app/my/my.directive.html',
        scope: {
            myProp: '='
        }, // isolate scope
        link: link
    };

    function link(scope, element, attr, myParentCtrl) {

        scope.myCtrl.myParent = myParentCtrl;

    }

问题(总是有问题):

请记住，指令的 Controller 是在调用链接函数之前构造的。因此，您不能指望在 Controller 构造期间执行的代码中解析 myParent 属性。

function MyController($scope) {

    var _self = this;

    _self.myParent.register(_self); // myParent is not defined

}

而是等到您确定 myParent 已解决

function MyController(scope) {

    var _self = this;

    _self.initialize = initialize;

    return;

    function initialize() {

        _self.myParent.register(_self); // myParent might be defined

    }

}

然后做类似的事情

function link(scope, element, attr, myParentCtrl) {

    scope.myCtrl.myParent = myParentCtrl;

    scope.myCtrl.initialize();

}

让我知道这是否有帮助、有误，或者您是否需要更多说明。

(另外，语法错误请见谅)