2

我的按钮实例在这里：

<button ng-hide="todo === 'add'" confirm-click ng-click="delete()">Delete</button>

我的指令代码在这里：

(function(app) {
    app.directive('confirmClick', function(){
        return {
            restrict: 'A',
            priority: 1,
            terminal: true,
            link: function(scope, element, attr) {
                var msg = attr.confirmationNeeded || "Really Delete?";
                var clickAction = attr.ngClick;
                element.bind('click', function() {
                    if(window.confirm(msg)){
                        scope.$apply(clickAction);
                    }
                });
            }
        }; 
    });
}(angular.module('case1')));

如果我从按钮 ng-hide 中删除该指令，则如果我包含该指令，它将不再起作用。当我包含指令时，我会假设 $scope.todo 变量超出范围，但我想知道如何解决这个问题？

4

2 回答 2

3

这里的关键是terminal:true导致 ng-hide 不执行的原因，它不是单独导致您所看到的行为的优先级。

终端 - 如果设置为 true，则当前优先级将是最后一组将执行的指令（当前优先级的任何指令仍将执行，因为相同优先级的执行顺序未定义）。

让您的指令在优先级为 0 的 ng-hide 之后执行。由于您的指令上有终端选项，它将跳过 ng-hide 的执行，因为您的指令的优先级为 1，而 ng-hide 的优先级较低。

尝试： -

return {
        restrict: 'A',
        terminal: true,
        link: function(scope, element, attr) {
            var msg = attr.confirmationNeeded || "Really Delete?";
            var clickAction = attr.ngClick;
            element.bind('click', function() {
                if(window.confirm(msg)){
                    scope.$apply(clickAction);
                }
            });
    }

演示

或者只是terminal从你的指令中删除选项，当它存在时告诉 Angular 跳过它之后的元素上的所有指令（较低优先级），除非你真的需要它。

于 2014-09-21T16:44:55.590 回答
2

这是因为priority: 1您的指令定义中的属性。

从文档：

优先

当在单个 DOM 元素上定义了多个指令时，有时需要指定应用指令的顺序。优先级用于在调用编译函数之前对指令进行排序。优先级被定义为一个数字。首先编译具有更高数值优先级的指令。预链接功能也按优先级顺序运行，但后链接功能按相反顺序运行。具有相同优先级的指令的顺序未定义。默认优先级为 0。

从ngHide 的源代码中，您可以看到它没有priority设置级别，因此默认为 0。当您将指令的优先级设置为 1 时，您将强制 Angular 先编译它。

要么将优先级设置为 0，要么忽略该属性并让它默认为 0。

于 2014-09-21T16:44:33.583 回答