动态禁用元素内的所有 ng-click

Question

我有一个指令disable-ng-clicks，在某些情况下，我想阻止所有属于该指令子项的 ng-click。这是一些示例标记：

<div disable-ng-clicks> <!-- directive -->
  <a ng-click="someAction()"></a>
  <div ng-controller="myController">
    <a ng-click="anotherAction()"></a>
    <a ng-click="moreActions()"></a>
  </div>
</div>

如果这些是普通的超链接，我可以在 link 函数中执行类似的操作：

function(scope, iElement, iAttrs) {
  var ngClicks = angular.element(iElement[0].querySelectorAll('[ng-click]'));
  ngClicks.on('click', function(event) {
    if(trigger) { // a dynamic variable that triggers disabling the clicks
      event.preventDefault();
    }
  });
}

但这不适用于ng-click 指令。有没有其他方法可以做到这一点？

Answer 1

我知道这是 2 年前的事，但我需要做类似的事情并想出了一个相当简单的解决方案。

对象：

items: {
    item1 : {
        selected: 0,
        other: 'stuff'
    },
    item2 : {
        selected : 1,
        other: 'stuff'
    }  
}

HTML：

<div ng-repeat="item in items" ng-model="item.selected" ng-click="selectParent($event)">
    <div ng-click="item.selected ? selectChild($event) : null">Child</div>
</div>

功能：

$scope.selectParent = function($event) {
    var itemScope = angular.element($event.currentTarget)scope().item;
    itemScope.selected = !itemScope.selected;
}

$scope.selectChild = function($event) {
    $event.stopPropagation;
    console.log('I only get triggered if parent item is selected');
}

这是我所做的一个非常原始的示例。您可能应该使用为您提供 $scope 而不是 angular.element($event.currentTarget).scope 的指令......无论哪种方式，如果逻辑是我真正想要的，那么简单的内联。您可以根据某个值调用或不调用函数。

Answer 2

这是我能想到的最好的。我创建了一个新指令来替换 ng-click：

 directive('myClick', ['$parse', function($parse) {
  return {
    restrict: 'A',
    compile: function($element, attrs) {
      var fn = $parse(attrs.myClick);
      return function (scope, element, attrs) {
        var disabled = false;
        scope.$on('disableClickEvents', function () {
          disabled = true;
        });
        scope.$on('enableClickEvents', function () {
          disabled = false;
        });
        element.on('click', function (event) {
          if (!disabled) {
            scope.$apply(function () {
              fn(scope, { $event: event });
            });
          }
        });
      };
    }
  }
}]);

所以在不同的指令中，我可以：

if (condition) { 
  scope.$broadcast('disableClickEvents');
}

当我想重新启用时：

if (otherCondition) { 
  scope.$broadcast('enableClickEvents');
}

我不喜欢为 ng-click 使用不同的指令，但这是我能想到的最佳方案。

Answer 3

该指令将遍历所有子元素，检查它们是否具有 ng-click 属性，如果有，它将禁用任何已注册的单击事件处理程序：

directive('disableNgClicks', function(){
  return {
    restrict: 'E',
    link: function(scope, elem, attrs){
      angular.forEach(elem.children(), function(childElem) {
        if (childElem.outerHTML.indexOf("ng-click") > -1) {
          angular.element(childElem).off('click');
        }
      });
    }
  }
})

Plunker demo

Answer 4

你只是因为JS events bubbling而在父级上捕获'click'事件，所以如果你想在所有后代上拦截它，那么你的指令应该获取当前元素的所有后代，监听他们的'click'事件并阻止它如有必要。