Question

也许我对指令控制器的工作方式有一个根本的误解，据我所知，它们被用作一种API，可以接触其他指令＆amp;控制器。我试图让控制器和链接功能在内部进行通信。

例如，我希望能够通过控制器功能设置变量，然后在链接功能中使用它：

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

控制器的$ scope（在控制器中定义，而不在sayHi函数中）和链接scope都是相同的。在控制器中设置内容可以从链接中使用，反之亦然。

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

由于sayHi不在范围内，您需要对控制器的引用并执行此操作，您可以添加第四个参数，如下所示：

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

然后你可以做ctrl.sayHi()（但同样，sayHi的那些参数属于控制器功能。）

如果您需要另一个控制器但仍想使用自己的指令，那么您也需要它。因此，如果此coolDirective需要访问notCoolAtAll的控制器，您可以执行以下操作：

require: ['coolDirective', 'notCoolAtAll']

这样就可以了。 link函数将接收一个控制器数组作为第四个参数，在这种情况下，第一个元素将是coolDirective ctrl，第二个元素将是notCoolAtAll。

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

Answer 2

重写上面的代码，它看起来像这样：

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

app.directive('coolDirective', function() {
    return {
        controller: function($scope) {
            // bind myVar property to scope
            $scope.myVar = 'yo';
            // bind sayHi method to scope
            $scope.sayHi = sayHi;
            // abstracting out the sayHi function
            function sayHi() {
                console.log($scope.myVar);
            }
        },
        link: function(scope, el, attrs) {
            // execute the sayHi function from link
            scope.sayHi(); // "yo" in console
        }
    };
});

祝你好运。

在同一指令的link函数中使用指令控制器中的函数

2 个答案: