AngularJS 指令和 jQuery DOM 事件绑定答案

【问题标题】：AngularJS Directive and jQuery DOM Event BindingAngularJS 指令和 jQuery DOM 事件绑定
【发布时间】：2013-09-29 13:04:38
【问题描述】：

我已经创建了一个指令，但我不太确定 element.bind("click", function(){}) 这样的绑定。每个指令的链接函数被多次调用，每次调用都会产生一个重复的绑定。实现这一点的最 Angular 方式是什么（甚至点击绑定也可以作为属性使用）？

var globalCounter = 0;
app.directive("myDirective", function()
{
    return {
       link: function(scope, element) {
          globalCounter++;
          $(element).bind("click", function () {});
       }
    }
});

每次我将 ng-view 更改为不同的模板时，globalCounter 变量（和点击绑定？）都会增加。

也许元素被破坏并且与它的绑定，我不确定，也许这就是我的答案。

【问题讨论】：

请发布您尝试过的演示的小提琴或 plunker

标签： javascript jquery angularjs

【解决方案1】：

您的假设并不完全正确。每个指令声明都会调用一次指令链接函数。因此，附加点击的元素是不同的。因此，每个功能都作用于不同的控件。

你仍然可以做基于 css 选择器的点击动作绑定，但是指令应该在父级上定义。

此外，当视图更改时，DOM 将被销毁，因此您的旧绑定将被删除。

【讨论】：

【解决方案2】：

我认为你可以设置一个限制配置选项

首先，我们正在设置限制配置选项。限制选项用于指定如何在页面上调用指令。

正如我们之前看到的，有四种不同的方式来调用指令，所以有四个有效的限制选项：
'A' - <span ng-sparkline></span>
'E' - <ng-sparkline></ng-sparkline>
'C' - <span class="ng-sparkline"></span>
'M' -

http://www.ng-newsletter.com/posts/directives.html

【讨论】：

留下这个是为了让这个例子更简单。

【解决方案3】：

您没有将计数器放在点击事件中。此外，对于具有指令的元素，您不需要 jQuery 选择器。

app.directive("myDirective", function()
{
    return {
       link: function(scope, element, attrs) {
          element.bind("click", function () {
             // Click event here
          });
       }
    }
});

【讨论】：

它仍然是同样的问题。链接函数被称为多次。每次对元素进行新绑定时...
如何将它绑定到元素上？你能显示包含该指令的 HTML sn-p 吗？

【解决方案4】：

我写了这个贬义的小例子https://github.com/JTOne123/angularJs.elementReady/blob/master/src/onElementReady.js 并在此处修复范围的一些问题

【讨论】：