Angular 1.Xコントローラとディレクティブとの関係

Question

2つの違いが何であるか尋ねることはありませんが、コンポーネントのディレクティブとコントローラの両方がある場合に、それらがどのように連携しているのか疑問に思っています。

Answer 1

私は角度1.xのあまり明確でない側面の1つについて関連する質問だと思うので、なぜこれをダウン投票したのか分かりません。コントローラとディレクティブを設定するには首相の理由の

ディレクティブAPIをさらす

一つの他のディレクティブにディレクティブのAPIを公開することです。その良い例はngModelとngModelControllerです。多くのカスタムディレクティブは、カスタムディレクティブが宣言されている場所以上に宣言されているngModelにアクセスする必要があります。

{ require:'^ngModel' } 

これは実際にこのカスタムディレクティブが追加作業を行うためにngModelControllerで利用可能なAPIにアクセスする必要があるを言っている：あなたは経由ディレクティブの定義でこれを参照してください。たとえば、特定のngModelに対してカスタムの構文解析や書式設定を指示したいとします。私のアプリでは、サーバーから返された日付文字列のエラーが発生していました。私は、エラーを処理して（これはところでCoffeeScriptの場合）、正しく文字列をフォーマットするために、このカスタムディレクティブを作成：

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

何ngModelControllerがなかった場合、私は新しいフォーマッタ機能を追加するためのAPIへのアクセス権を持っていないでしょう。

結論として、同じUI要素で動作する可能性のある他のディレクティブ用のAPIを提供するディレクティブコントローラを作成することがあります。

クラシックコントローラの役割テンプレートはjQueryの実装を使用しようとするよりも良好であるにAPIを公開するために、コントローラを使用して、角の精神および意図内であるためです。言い換えれば、これを行う方が良いです：

ディレクティブw。この

ディレクティブワットのようなものVSコントローラ

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

。 jqueryのような実装

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