在自定义指令中禁用ngClick事件处理

Question

这是一个指令,我试图根据模型值禁用链接:

app.directive('disableable', function($parse){
    return {
        restrict: 'C',
        require: '?ngClick',
        link: function (scope, elem, attrs, ngClick) {
            if (attrs.disable){
                var disable = $parse(attrs.disable);

                elem.bind('click', function (e) {
                    if (disable(scope)){
                        e.preventDefault();
                        return false;
                    }

                    return true;
                });

                scope.$watch(disable, function (val) {
                    if (val){
                        elem.addClass('disabled');
                        elem.css('cursor', 'default');
                    }
                    else {
                        elem.removeClass('disabled');
                        elem.css('cursor', 'pointer');
                    }
                });
             }
         }
     };
});

我希望能够禁用所有链接操作,无论它们是使用简单的href还是ngClick操作.由于preventDefault调用,Hrefs工作正常,但我无法弄清楚如何深入了解ngClick并防止它被触发.我在click事件上执行的绑定不起作用,因为看起来ngClick绑定了我自己无法控制的处理程序.有什么我能做的吗？

jsFiddle:http://jsfiddle.net/KQQD2/2/

Answer 1

使用event.stopImmediatePropagation.

来自MDN:

如果多个侦听器附加到同一事件类型的同一元素,则会按照添加它们的顺序调用它们.如果在一次这样的调用期间调用event.stopImmediatePropagation(),则不会调用剩余的侦听器.

...
elem.bind('click', function (e) {
  if (disable(scope)){
    e.stopImmediatePropagation();
    return false;
  }

  return true;
});
...

工作时尚