Javascript Jquery在Angular controller内单击事件问题：循环多次

我正在开发一个带有onsen UI（基于角度）+phonegap的应用程序。 所以我在angular控制器中有一个JQuery click事件，这就是问题所在

当我返回页面堆栈并再次执行时，它会多次触发单击事件

我在angular controller中使用jquery click事件，因为我必须在此事件中使用Onsen UI服务。因此，我必须在控制器内声明此事件。但这就是问题所在。看：

module.controller('ListController', function($scope, EventsService, OneEventService) {

  $scope.events = EventsService.getPopular();

  //this is the event that is triggering many times
  $(document).on("click",".item-from-list",function(e){...}

我试图使用

$（元素）。单击（func）

，但它无法获取DOM元素。 然后我使用

$（document）。在（“click”，elem，func）

---

那么我如何解决这个问题呢？

这是因为每次初始化控制器时，您都要在文档上注册

单击
处理程序。每次导航到其他页面/视图并再次返回同一页面时，控制器都会初始化（即执行控制器中的所有代码），因此jQuery每次都会在文档上添加一个新的单击事件侦听器

您可以通过两种方式解决此问题

选项1:

在添加新的单击处理程序之前，使用jQuery的
off（）
取消注册现有的单击处理程序

 `$(document).off().on("click",".item-from-list",eventHandlerFn);`

选项2:

使用Angular的基于作用域的事件处理程序，如
ng单击
，当控制器超出作用域时，即当您移动到新页面时，会自动取消注册

<div class='item-from-list' ng-click='handleClick()'></div>

 module.controller('ListController', function($scope) {

      $scope.handleClick= function(){ /*  handle click event here */ };

 }

很高兴能为您提供帮助：）嘿，阿肯托斯，还有一个问题：案例2使用基于角度的示波器，我如何告诉他仅为我的元素获取单击事件？（“列表中的项目”）。。。这类似于（'click'，'list'中的项'，函数）上的
$scope.$on？@harleydavi。。很抱歉这么晚才回复。我先前的回答有一个错误
$on
用于侦听由
$broadcast
或
$emit
方法触发的事件。如果希望处理基于DOM的事件，如单击，则需要像我在回答中所做的那样，对元素使用相应的角度指令（ng click）。@harleydavi。。AngularJS的基本理念之一是将DOM操作排除在
控制器之外，因此我建议第二种方法来解决您的问题。甚至还有第三种方法可以定义您自己的自定义指令，您可以在其中获得对元素的引用，您可以使用jQuery或默认的jQLite的on（）注册您的单击处理程序。
module.directive('registerClick',function(){

  return {
        restrict : 'A',
        link: function (scope, element, attrs) {

            /* register your event handler here */
            element.on('click', clickHandlerFn);

            /* As we're explicitly registering the handler, we need 
              to de-register it, once your element is destroyed like below */

            element.on('$destroy', function () {
                element.off('click', clickHandlerFn);
            });
        }
    };

});