3

ここでjsfiddle 。私は、ディレクティブの優先順位とターミナル プロパティを試してきました。優先度 3、2、1 の 3 つのディレクティブを作成しました。メイン ディレクティブ (最高の優先度、優先度: 3) には、ボタンを作成するテンプレートがあり、ボタンをクリックすると、ディレクティブのコントローラーのメソッドが呼び出されます。優先度 2 のディレクティブに terminal: true を配置するまで、すべて正常に動作します。なんらかの理由でボタンが機能しなくなります。メイン ディレクティブ (優先度 3) は正常にレンダリングされますが、ボタンをクリックしても何も起こりません。繰り返しますが、これはjsfiddleであり、ディレクティブのコードは次のとおりです。

myApp = angular.module('myApp', [])
    .directive('greeting', function() {
        return {
            restrict: 'E',
            replace: true,
            priority: 3,
            template: "<button class='btn' ng-click='sayHello()'>Say Hello</button>",
            controller: function($scope) {
                var greetings = ['hello'];
                $scope.sayHello = function() {
                    alert(greetings.join());
                }
                this.addGreeting = function(greeting) {
                    greetings.push(greeting);
                }
            }
        };
    })
    .directive('finnish', function() {
        return {
            restrict: 'A',
            priority: 2,
            terminal:true,
            require: 'greeting',
            link: function(scope, element, attrs, controller) {
                controller.addGreeting('hei');
            }
        };
    })
    .directive('hindi', function() {
        return {
            restrict: 'A',
            priority: 1,
            require: 'greeting',
            link: function(scope, element, attrs, controller) {
                controller.addGreeting('नमस्ते');
            }
        };
    });

ページの html は次のようになります。

<body ng-app="myApp">
    <greeting finnish hindi />
</body>
4

2 に答える 2

4

AngularJS コード (特に applyDirectivesToNode hereterminal:true ) をデバッグすると、ディレクティブを設定すると、最終的finnishに処理が停止するように見えますng-click(これは、優先度 2 よりも低い優先度 0 に設定されたディレクティブです)。したがって、ボタンをクリックしても何も起こりません。

を終了しないように、ディレクティブの優先度をそれぞれ 0、-1、および -2 に変更した変更済みフィドルng-clickを次に示します。

myApp = angular.module('myApp', [])
    .directive('greeting', function() {
        return {
            restrict: 'E',
            replace: true,
            priority: 0,
            template: "<button class='btn' ng-click='sayHello()'>Say Hello</button>",
            controller: function($scope) {
                var greetings = ['hello'];
                $scope.sayHello = function() {
                    alert(greetings.join());
                }
                this.addGreeting = function(greeting) {
                    greetings.push(greeting);
                }
            }
        };
    })
    .directive('finnish', function() {
        return {
            restrict: 'A',
            priority: -1,
            terminal:true,
            require: 'greeting',
            link: function(scope, element, attrs, controller) {
                controller.addGreeting('hei');
            }
        };
    })
    .directive('hindi', function() {
        return {
            restrict: 'A',
            priority: -2,
            require: 'greeting',
            link: function(scope, element, attrs, controller) {
                controller.addGreeting('नमस्ते');
            }
        };
    });
于 2013-05-03T07:27:07.443 に答える
0

@Jim Cooper、Angular-1.2.1を使用すると、ボタンをクリックすると出力として「hello、hie」が表示されます。私はそれがアウトプットであるべきだと信じています。それ以外の場合、挨拶の優先度は、テンプレート化された html で使用されているディレクティブの優先度に従って設定する必要があります。テンプレート化された html 内に、いくつかの組み込みディレクティブと共に優先度の異なるカスタム ディレクティブを導入すると、混乱を招きます。

于 2013-12-18T08:24:44.743 に答える