Angular 1.X控制器和指令之间的关系是什么

Question

我不是在问两者之间的区别是什么，我想知道当一个组件有指令和控制器时它们如何协同工作。

Answer 1

我不确定你为什么会对此投票，因为我认为这是关于角度1.x的一个不那么明确的方面的相关问题。

公开指令API

使用控制器设置指令的一个主要原因是将指令的API公开给其他指令。一个很好的例子是ngModel和ngModelController。许多自定义指令需要访问ngModel，该{ require:'^ngModel' } 也在声明自定义指令的地方或之上声明。您可以通过以下方式在指令定义中看到：

ngModelController

这实际上是说此自定义指令需要访问.directive 'dateString', [ ()-> { priority: 10 require: 'ngModel' link: ($scope, elem, attrs, ngModel)-> ngModel.$formatters.push (val)-> new Date(val) } ] 上可用的API来执行其他工作。例如，您希望指令在特定的ngModel上进行一些自定义解析或格式化。在我的应用程序中，我不断收到从服务器返回的日期字符串的错误。我创建了这个自定义指令来处理错误并正确格式化字符串（这是coffeescript btw）：

ngModelController

如果没有controller: function($scope){ $scope.doSomething = function(){ ... } }, template: '<div><button ng-click="doSomething()">Click Me</button></div>' ，我就无法访问API来添加新的格式化程序功能。

总而言之，我们可能会创建指令控制器来为可能在同一UI元素上运行的其他指令提供API。

经典控制器角色

为了符合Angular的精神和意图，使用控制器向模板公开API比尝试使用jquery实现更好。换句话说，最好这样做：

指令w。控制器

link: function($scope, elem, attrs){
     elem('button').bind('click', function(){ ... })
},
template: '<div><button>Click Me</button></div>'

vs类似的东西

指令w。类似jquery的实现

  $("#maincontent").css("background-image","url(" + season + ")");