Question

jsfiddle here。我一直在试验指令优先级和终端属性。我创建了一个优先级为3,2和1的三个指令。主要指令（最高优先级，优先级：3）有一个模板，用于创建一个按钮，单击该按钮可以调用指令控制器上的方法。一切正常，直到我把priority：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>

Answer 1

调试AngularJS代码（特别是applyDirectivesToNode here）看起来当你在terminal:true指令上设置finnish时，它最终会暂停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('नमस्ते');
            }
        };
    });

Answer 2

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

AngularJS终端指令不起作用

2 个答案: