javascript - 将 Controller 和指令的交互方式结合在一起

Question

过去几天我读了很多关于指令和 Controller 之间的联系的文章。我做了一些观察，但无法将它们全部放在一起，并且需要一些指导。

我见过 Controller 和指令混合的大约有四五种方式。

给定:

angular.module('myApp', []);
myApp.controller('ctrlName', function($scope){
   $scope.someVar = "some value";
});

我见过指令和 Controller 通过以下方式交互并相互连接:

1) 用点链接在一起

myApp.controller('ctrlName', function($scope){
   $scope.someVar = "some value within controller";
})
.directive('drtvName', function(){
   return {
     scope: {
       someVar: 'some value within directive'
     }
   }
});

2) Controller 指定为指令的方法。如果它是点链的一部分(如#1)，它如何与上面的 Controller 交互

myApp.directive('drtvName', function(){
   scope: {/*not sure what it means when this is simply an empty object*/},
   controller: function(scope){
    /*is this completely separate from myApp.controller('name', function(){});*/
   }
});

3) Controller 被指定为应用程序内单独 Controller 的名称。我不太确定这两个 scope 如何混合

myApp.directive('drtvName', function(){
   controller: 'ctrlName',
   scope: {
     connectedToCtrlScopeOrJustHTMLView: 'dunno'
   }
});

4) 这是一个新的。该 Controller 需要作为父 Controller 。当我修改这个时，我什至无法使用链接方法让它工作，所以我不确定它什么时候有用

myApp.directive(drtvName', function(){
   scope: {},
   require: '^myParentController' //not sure what scope will be one line about with this option
});

Answer 1

您在那里列出的交互在很多方面都有所不同，但我将尝试在这里总结它们:

1. 这说明了创建模块并向该模块添加指令和 Controller 。在这种情况下，它们不会相互交互，而是与模块本身交互。 .directive 和 .controller 的返回值是模块，因此这就是链接的来源。

2. 在本例中，您正在定义指令的 Controller 函数。回答你的问题，是的，这是一个与你拥有的方式完全不同的 Controller ，但是......

3. 要继续讨论下一点，您可以像 #1 中那样在模块上定义 Controller ，然后在指令中使用它:

在您的模块中:

module.controller('myController', function () {...});

在您的指令中:

controller : 'myController'

这使得诸如单元测试指令之类的事情变得非常简单，并且可以可靠地分离关注点。

这是指令需要与另一个指令通信的时候。指令的 Controller 功能基本上就是它的 API。因此，如果您的指令中需要另一个指令，则所需指令的 Controller 函数将作为第四个参数注入(inject)到链接函数中。

因此，在您的示例中，myParentController 的 Controller 函数将作为第四个参数注入(inject)到链接函数中，因此您可以这样定义它:

link : function (scope, element, attrs, myParentController)

然后，在执行要求的指令中，您可以访问在您需要的 Controller 的 Controller 函数上定义的任何函数。

希望有帮助。