AngularJS Terminal Directive Not Working -
jsfiddle here. have been experimenting directive priorities , terminal property. have created 3 directives priorities 3, 2, , 1. main directive (highest priority, priority: 3) has template creates button , clicking button calls method on directive's controller. works fine until put terminal: true on priority 2 directive. reason causes button stop working; main directive (priority 3) renders fine, clicking button nothing. again, here jsfiddle, , here code directives:
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('नमस्ते'); } }; }); the html on page looks this:
<body ng-app="myapp"> <greeting finnish hindi /> </body>
debugging angularjs code (particularly applydirectivestonode here) looks when set terminal:true on finnish directive ends halting processing of ng-click (which directive set priority 0, lower priority 2). clicking on button nothing.
here modified fiddle priorities of directives changed 0, -1, , -2 respectively not terminate 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('नमस्ते'); } }; });
Comments
Post a Comment