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或者点击和其他人到div，我想避免这种绑定，由于这个绑定很多不必要的事件被添加到div，这是不需要。

现在我想扩展ng-click指令，并且需要在将事件与元素绑定之前添加条件检查，如果条件为false，我将不绑定事件，否则如果它为true我将绑定事件。 / p>

为了解决这个问题，我可以编写自己的指令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
  })
}

绑定点击和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?

扩展ngClick以添加其他功能

1 个答案: