3

jsfiddle在这里。我一直在试验指令优先级和终端属性。我创建了三个优先级为 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>
4

2 回答 2

4

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

这是一个修改过的小提琴，您的指令的优先级分别更改为 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('नमस्ते');
            }
        };
    });
于 2013-05-03T07:27:07.443 回答
0

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

于 2013-12-18T08:24:44.743 回答