扩展 ngClick 以添加附加功能

Question

大家好，有什么方法可以扩展内置指令吗？

这就是我想做的。

例如我的指令模板是：

    <div ng-click="condition && handleClick()" ng-transclude></div>

这里的条件是是否执行对 div 的点击，所以当我重用指令并使其嵌套时，我最终会这样。

注意：我的指令中的条件不会动态改变，这只是一个时间值。

    <div ng-click="condition && handleClick()">
        <div ng-click="condition && handleClick()">
            <div ng-click="condition && handleClick()"></div>
        </div>
    </div>

所以现在的问题是，如果 ng-click 添加到 div 角度将 touchstart 或 click 和其他绑定到 div，我想避免这种绑定，由于这种绑定，许多不必要的事件被添加到 div 中不需要。

现在我想扩展 ng-click 指令，需要在将事件与元素绑定之前添加条件检查，如果条件为假，我将不绑定事件，否则如果为真，我将绑定事件。

为了解决这个问题，我可以编写自己的指令 ng-click-condition 并执行与 ng-click 相同的操作，但要进行条件检查，但如果这样做，我会导致代码重复和可维护性问题，所以我找到了一些重用内置指令的方法。

Answer 1

如果我理解您要正确执行的操作，您应该将所有这些逻辑打包在指令中。

将指令的范围设置为范围：{}（范围：true，也可以工作。只要每个指令都有自己的范围）

在你的指令的链接函数中：

element.bind('click', function() {
  if (condition) {
    //do something awesome
  }
})

或者如果您想避免绑定，除非满足条件，只需反转绑定即可。但我还是会把它放在指令中：

if (some condition) {
  element.bind('click', function() {
    //do something awesome
  })
}

绑定点击和触摸启动： How to bind 'touchstart' and 'click' events but not respond to both?

编辑： 在需要扩展 ng-click 时仍然没有完全出售。有条件地添加 ng-click 怎么样？

Dynamically add angular attributes to an element from a directive

Angular directive how to add an attribute to the element?