在同一指令的链接函数内使用指令控制器中的函数

也许我对于指令控制器是如何工作有一个基本的误解，据我所知，他们被用作一种API暴露给其他指令和控制器。 我试图让控制器和链接function进行内部沟通。

例如，我希望能够通过控制器function设置一个variables，然后在链接函数中使用它：

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); } } }); 

如何在链接function中访问myVar或sayHi？ 还是我完全错过了这一点？

Answer 1

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

你所遇到的问题是sayHi是一个永远不会被触发的函数，所以myVar永远不会被设置。

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

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

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

如果你需要另一个控制器，并且仍然想要使用自己的指令，那么你也需要它。 所以如果这个coolDirective需要访问coolDirective的控制器，你可以这样做：

 require: ['coolDirective', 'notCoolAtAll'] 

这将有诀窍。 link函数将接收一个控制器数组作为第四个参数，在这种情况下，第一个元素是coolDirective ctrl，第二个元素是coolDirective 。

这是一个小例子： 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 } }; }); 

祝你好运。