AngularJS Terminal Directive Not Working

angularjs, angularjs-directive

Solution

Debugging the AngularJS code (particularly applyDirectivesToNode here) it looks like when you set `terminal:true` on your `finnish` directive it ends up halting the processing of `ng-click` (which is itself a directive set to priority 0, lower than priority 2). So clicking on the button does nothing.

Here is a modified fiddle with the priorities of your directives changed to 0, -1, and -2 respectively so as not to terminate the `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('नमस्ते');
            }
        };
    });

Problem

jsfiddle here. I have been experimenting with directive priorities and the terminal property. I have created a three directives with priorities 3, 2, and 1. The main directive (highest priority, priority: 3) has a template that creates a button and clicking the button calls a method on the directive's controller. Everything works fine until I put terminal: true on the priority 2 directive. For some a reason that causes the button to stop working; the main directive (priority 3) renders fine, but clicking the button does nothing. Again, here is the jsfiddle, and here is the code for the 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 the page looks like this: ``` <body ng-app="myApp"> <greeting finnish hindi /> </body> ```

Original source