javascript - 扩展 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 angular 将 touchstart 或 click 和其他绑定(bind)到 div，我想避免这种绑定(bind)，由于这种绑定(bind)，许多不必要的事件被添加到 div 这是不需要。

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

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

Answer 1

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

将指令的范围设置为 scope: {}(scope: true，也可以。只要每个指令都有自己的范围即可)

在指令的链接函数中:

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

或者，如果您希望在满足条件之前避免绑定(bind)，只需反转绑定(bind)即可。但我仍然会把它放在指令中:

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

绑定(bind)click和touchstart: 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?