将控制器和指令的交互方式捆绑在一起

tying together the ways controllers and directives interact

本文关键字：在一起 交互方式 控制器 指令      更新时间：2023-09-26

在过去的几天里，我读了很多关于指令和控制器之间连接的文章。我已经做了一些观察，但我有麻烦把它们放在一起，可以使用一点指导。

我见过控制器和指令混在一起的方式有四到五种。

给定

: 

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

我见过指令和控制器以以下方式相互作用和连接:

1)用圆点连在一起

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

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

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)控制器被指定为应用程序中单独控制器的名称。我真的不确定两个scope将如何混合

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

这里有一个新的。该控制器需要作为父控制器。当我修补这个的时候，我甚至不能使用链接方法让它工作，所以我不确定什么时候它会有用

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

您列出的交互在许多方面各不相同，但我将在这里总结它们:

  1. 这演示了创建一个模块并向该模块添加指令和控制器。在这个实例中，它们不是相互交互，而是与模块本身交互。.directive和.controller的返回值是模块，所以这就是链接的来源。

  2. 在这种情况下，你是在定义一个指令的控制器函数。回答你的问题，是的，这是一个完全不同的控制器与你的方式，但是....

  3. 要进入下一个点，你可以像在#1中那样在模块上定义一个控制器，然后在你的指令中使用它:

在你的模块:

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

在你的指令中:

controller : 'myController'

这使得像对指令进行单元测试这样的事情变得超级容易，同时也实现了关注点的可靠分离。

  • 当一个指令需要与另一个指令通信时。指令的控制器函数基本上就是它的API。因此，如果你在指令中需要另一个指令，那么所需要指令的控制器函数就会作为第四个参数注入到你的link函数中。

    • 因此，在您的示例中，myParentController的控制器函数将作为链接函数的第四个参数注入，因此您可以这样定义它:

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

    然后，在执行要求的指令中，你可以访问在你所要求的控制器的控制器函数上定义的任何函数。

    希望对你有帮助。

    相关文章：