ここで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>