html - 当在同一元素上添加带有终端选项的自定义指令时，ng-hide 不起作用

Question

我的按钮实例化在这里:

<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 变量超出范围，但我想知道如何解决这个问题？

Answer 1

这里的键是terminal:true这会导致 ng-hide 的执行不会发生，并不是单独的优先级导致了您所看到的行为。

terminal - If set to true then the current priority will be the last set of directives which will execute (any directives at the current priority will still execute as the order of execution on same priority is undefined).

---

让你的指令在优先级为 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);
                }
            });
    }

<强> Demo

或者只是从指令中删除 terminal 选项，该选项存在时会告诉 Angular 跳过其后面的元素上的所有指令(优先级较低)，除非您确实需要它。