10

コントローラーを作成するこれら2つの方法のユースケースは何なのか疑問に思っています。

ngController の使用:

myApp.controller('myController', ['$scope', function ( $scope ) {

}]);

controller 属性を使用してディレクティブ内でコントローラーを構築する:

myApp.directive ( 'myDirective', [ '$window', function( $window ) {
    return {
        restrict: 'A',
        controller: [ '$scope', function( $scope ) {

        }],
        link: function( scope, element, attrs ) {

        }
    };
}]);

同じ要素で両方が呼び出された場合、ディレクティブ内でコントローラーを構築しない理由はありますか?

コントローラーがどれほど広く使用されているか/複雑であるかという問題ですか?

4

4 に答える 4

8

ディレクティブ コントローラーを使用する理由は、次の 1 つの文に要約されています。

再利用可能なコンポーネントを作成するには

ディレクティブ コントローラーには、再利用できるコンポーネントのロジックが含まれている必要があります。再利用可能なコンポーネントを作成する方法は、isolate スコープと共にディレクティブ コントローラーを使用することです。

ページネーターを例にとります。ページネーターには、現在選択されているページが変更されたことを他のコンポーネント (グリッドなど) に通知して、それに応じてグリッドを更新できるようにするためのロジックが必要です。これらのロジックは、ディレクティブ コントローラー内に記述して再利用できます。分離スコープと一緒に使用する場合、このスコープはアプリケーション コントローラーのスコープに限定されず、アプリケーション コントローラーのスコープの任意のプロパティにバインドするようにpageSizeを構成するのは簡単です。

于 2013-10-07T14:28:16.637 に答える
5

通常のコントローラー ( ng-controller または routes を使用して作成されたもの) とディレクティブ コントローラーには微妙な違いがあります。

  1. ディレクティブ コントローラーは を注入でき$elementます。現在、通常のコントローラーにも注入できますが$element、そうするのは悪い習慣であることに注意してください。

  2. ディレクティブ コントローラの唯一の目的は、ディレクティブ間の通信です。タブ コンポーネントの AngularJS のメイン ページに、非常に優れた使用例が示されています。

ディレクティブ コントローラーを使用すると、ディレクティブに機能を持たせることができます。これらのコントローラ インスタンスは他のディレクティブで「必須」になる可能性があるため、他のディレクティブはコントローラ インスタンスを使用してこのディレクティブで通信/操作できます。

ディレクティブでコントローラーを使用する唯一の理由は、何らかのディレクティブ間の通信を行いたい場合です。それ以外の場合は、おそらくすべてのscopeロジックをリンク関数に記述することに固執する必要があります。

于 2013-10-07T13:30:04.927 に答える
0

ディレクティブが呼び出されるたびにディレクティブコントローラーが呼び出されます

<directive id="1"></directive>
<directive id="2"></directive>
<directive id="3"></directive>

ディレクティブ コントローラーは 3 回呼び出し、それぞれに独自のスコープがあります。

そして ngController も同じ性質を持っています。しかし、ngcontroller は他のディレクティブや html ページでも再利用できます。

ngcontroller をディレクティブに入れることもできます ( appCtrl は任意の controller.js ファイルで定義されていると想定しています)

.directive('directive',function(){
    return{
         scope:{},
         template:"<div>{{hello}}</div>",
         controller:"appCtrl"
    }
})
于 2013-10-09T04:42:05.730 に答える
0

ディレクティブ コントローラー内のメソッドと値へのアクセスに関する詳細を追加します。

親ディレクティブ

myApp.directive ( 'parent', [ function() {
    return {
        restrict: 'A',
        scope: {},
        controller: [ '$scope', function( $scope ) {
            //this.myVar = ''; //accessible in child directives
            //$scope.myVar = ''; //accessible in template
            $scope.myVar = this.myVar = '';
        }],
        template: '<div data-child> {{myVar}} </div>',
        link: function( scope, element, attrs ) {

            console.log( scope.myVar );

        }
    };
}]);

子指令

myApp.directive ( 'child', [ function() {
    return {
        restrict: 'A',
        require: '^parent',
        link: function( scope, element, attrs, ctrl ) {

            console.log( ctrl.myVar );

        }
    };
}]);
于 2014-05-28T17:59:56.133 に答える