18

このドキュメント: http://docs.angularjs.org/guide/directiveでは、ディレクティブがコントローラーによって相互に通信できると記載されています。

controller - コントローラー コンストラクター関数。コントローラーはリンク前フェーズの前にインスタンス化され、他のディレクティブが名前で要求した場合に共有されます (require 属性を参照)。これにより、ディレクティブが相互に通信し、相互の動作を強化することができます。

よくわかりませんが、彼らはどのように管制官と通信していたのですか? そのための例やデモはありますか?

4

1 に答える 1

34

おそらく、ルート変更が発生したときに作成されるコントローラーと、ディレクティブ コントローラーを混同している可能性があります。そのセクションはディレクティブ コントローラーについてのみ説明しているため、このセクションが意味することは、同じ HTML 要素に 2 つのディレクティブがある場合、それらは互いのコントローラーを要求することで通信できるということです。

その良い例は、 と通信する必要があるディレクティブを作成する場合ですng-model。コントローラーを公開するためng-model、次のように要求できます。

myApp.directive('myDirective', function() {
    return {
        require: 'ngModel',
        link: function($scope, elem, attrs, ngModelCtrl) {
            // Here you can listen to different DOM events, and
            // call ngModelCtrl when the model value needs to update
        }
    }
});

そしてHTML：

<input type="text" ng-model="myModel" my-directive>

次のように、ディレクティブ関数が返すオブジェクトにコントローラーを実装することで、ディレクティブを公開できます。

myApp.directive('myDirective1', function() {
    return {
        link: function($scope, elem, attrs) {

        },
        controller: function() {
            this.sayHello = function() {
                alert("hello!");
            }
        }
    }
});

myApp.directive('myDirective2', function() {
    return {
        require: 'myDirective1',
        link: function($scope, elem, attrs, myDirective1Ctrl) {
            myDirective1Ctrl.sayHello();
        }
    }
});

そしてHTML：

<input type="text" my-directive2 my-directive1>

次のように記述することで、親ディレクティブからディレクティブ コントローラーを要求することもできますrequire: '^myParentDirective'。

myApp.directive('myDirective1', function() {
    return {
        link: function($scope, elem, attrs) {

        },
        controller: function() {
            this.sayHello = function() {
                alert("hello!");
            }
        }
    }
});

myApp.directive('myDirective2', function() {
    return {
        require: '^myDirective1',
        link: function($scope, elem, attrs, myDirective1Ctrl) {
            myDirective1Ctrl.sayHello();
        }
    }
});

そしてHTML：

<div my-directive1>
    <div my-directive2></div>
</div>
于 2013-03-08T09:00:54.453 に答える