在使用Angular.js时，你可能会注意到在一些情况下，标签的ng-click事件似乎会被触发两次。这是因为Angular.js的事件处理机制导致了事件的重复执行。
问题原因
导致这个问题的主要原因是Angular.js的事件处理机制，它会在每次$scope.$apply()被调用时重新绑定事件处理函数。而在某些情况下，比如应用使用了ng-show或ng-if指令时，会导致$scope.$apply()被执行多次。
例如，以下示例代码演示了一个简单的表单，其中包含一个带有ng-click事件的标签：
---- -------------- -----------------------
------
------ --------------------------------
-------
------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
-------------- - ---------- -
----------------------
--
---
---------当点击“点我！”标签时，控制台将输出“Click！”消息。但是如果你现在添加ng-show指令来隐藏该标签，你会发现点击标签时却会输出两个消息。
------ ------ -------------------- -------------------------- -------
这是因为ng-show指令会引起$scope.$apply()的执行，从而导致事件处理函数被重新绑定，因此标签上的ng-click事件被触发了两次。
解决方案
解决这个问题的一种方法是使用ng-if指令来替代ng-show指令。因为ng-if指令会在元素被删除时销毁作用域，从而避免了重复绑定事件处理程序的问题。
------ ------ -------------------- ------------------------ -------
另外，如果你必须使用ng-show指令，那么你可以使用一些技巧来避免重复绑定事件处理程序。比如，在控制器中定义一个变量来保存事件处理程序，并在视图中使用该变量来绑定事件。
---- -------------- -----------------------
------
------ --------------------------------
-------
------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
--- -------- - ---------- -
----------------------
--
-------------- - ---------- -
-- ----------- -------
-----------
-------- - -----
--
---------------------- ---------- -
-------- - -----
---
---
---------在这个例子中，我们定义了一个私有变量_handler来保存事件处理程序。在控制器的$destroy事件中，我们将_handler设置为null，以便在作用域销毁时清除事件处理程序。
结论
本文介绍了Angular.js中标签的ng-click事件被触发两次的问题，并提供了两个解决方案来避免这个问题。希望这篇文章能够帮助到您，同时也希望您在使用Angular.js时更加顺利。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27798