Angular 1.X控制器和指令

Question

之間的關係是什麼？我不是問兩者之間有什麼區別，我想知道它們在組件的指令和控制器中是如何協同工作的。

Answer 1

我不確定爲什麼你對此表決不滿意，因爲我認爲這是一個與角度1.x的不太清晰的方面有關的問題。

暴露指令的API

其中一個主要的原因，以建立與控制器的指令是揭露一個指令的API其他指令。一個很好的例子是ngModel和ngModelController。許多自定義指令都需要訪問ngModel，這些指令也在聲明自定義指令的地方或上方聲明。

{ require:'^ngModel' } 

這實際上是說這個定製指令需要訪問的ngModelController可用API做額外的工作：你可以通過該指令定義看到這一點。例如，你想要一個指令在特定的ngModel上做一些自定義的分析或格式化。在我的應用程序中，我不斷收到從服務器返回的日期字符串的錯誤。我創建這個自定義指令來處理錯誤和正確格式化字符串（這是BTW的CoffeeScript）：

.directive 'dateString', [ 
()-> 
    { 
     priority: 10 
     require: 'ngModel' 
     link: ($scope, elem, attrs, ngModel)-> 
      ngModel.$formatters.push (val)-> new Date(val) 
    } 
] 

如果沒有ngModelController，我不會有機會獲得API來添加一個新的格式化功能。

因此，總而言之，我們可能會創建指令控制器來爲可能在同一UI元素上操作的其他指令提供API。

經典控制器角色

爲了折角的精神和意圖內，使用控制器暴露的API，模板比試圖用一個jQuery實現更好的。換句話說，最好這樣做：

指令w。控制器

controller: function($scope){ 
    $scope.doSomething = function(){ ... } 
}, 
template: '<div><button ng-click="doSomething()">Click Me</button></div>' 

VS像這樣

指令W上。 jquery-like的實現

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