AngularJS终端指令不起作用答案

【问题标题】：AngularJS Terminal Directive Not WorkingAngularJS终端指令不起作用
【发布时间】：2013-04-27 11:48:10
【问题描述】：

jsfiddle here。我一直在试验指令优先级和终端属性。我创建了三个优先级为 3、2 和 1 的指令。主指令（最高优先级，优先级：3）有一个模板，该模板创建一个按钮，单击该按钮会调用指令控制器上的一个方法。一切正常，直到我将 terminal: true 放在优先级 2 指令上。由于某种原因导致按钮停止工作；主要指令（优先级 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>

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

@Jim Cooper，如果您使用 Angular-1.2.1，您将在单击按钮时得到“hello,hie”作为输出。我相信这应该是输出。否则，问候语的优先级需要根据模板化 html 中使用的指令的优先级来设置。如果我们在模板化的 html 中引入具有不同优先级的自定义指令以及一些内置指令，那将是令人困惑的。

【讨论】：

【解决方案2】：

调试 AngularJS 代码（尤其是 applyDirectivesToNode here），当您在 finnish 指令上设置 terminal:true 时，它最终会停止处理 ng-click（它本身就是一个设置为优先级 0 的指令，低于优先级 2)。所以点击按钮什么都不做。

Here is a modified fiddle 将指令的优先级分别更改为 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('नमस्ते');
            }
        };
    });

【讨论】：

这完全有道理！感谢您深入研究！