angularjs - 在同一指令的链接函数中使用指令 Controller 的函数

Question

也许我对指令 Controller 的工作方式有一个根本性的误解，据我了解，它们被用作一种暴露给其他指令和 Controller 的 API。我正在尝试让 Controller 和链接功能进行内部通信。

例如，我希望能够通过 Controller 函数设置一个变量，然后在链接函数中使用它:

var app = angular.module('test-app', []);

app.directive('coolDirective', function () {
    return {
        controller: function () {
            this.sayHi = function($scope, $element, $attrs) {
                $scope.myVar = "yo"
            }
        },
        link: function(scope, el, attrs) {
            console.log(scope.myVar);
        }   
    }
});

如何在链接函数中访问 myVar 或 sayHi？还是我完全没有捕获要点？

Answer 1

两个 Controller 的 $scope(在 Controller 中定义，而不是在 sayHi 函数中定义)和链接 scope 是相同的。在 Controller 中设置某些内容可以从链接中使用，反之亦然。

您遇到的问题是 sayHi 是一个永远不会触发的函数，因此 myVar 永远不会设置。

由于 sayHi 不在范围内，因此您需要对 Controller 的引用，为此，您可以添加第四个参数，如下所示:

link: function(scope, element, attr, ctrl) {}

然后你可以执行 ctrl.sayHi() (但是，sayHi 的那些参数属于 Controller 函数。)

如果您需要要求另一个 Controller 并且仍然想使用它自己的指令，那么您也需要要求它。因此，如果这个 coolDirective 需要访问 notCoolAtAll 的 Controller ，您可以这样做:

require: ['coolDirective', 'notCoolAtAll']

这样就可以了。 link 函数将接收一个 Controller 数组作为第四个参数，在本例中，第一个元素将为 coolDirective ctrl，第二个元素为 notCoolAtAll一。

这是一个小例子:http://plnkr.co/edit/JXahWE43H3biouygmnOX?p=preview