Jquery Angular 控制器问题中的点击事件：循环多次

Question

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

当我回页栈再去的时候，触发了很多次点击事件

我在 angular 控制器中使用 jquery 单击事件，因为我必须在该事件中使用 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){...}

我尝试使用 $(element).click(func) 但它无法获取 DOM 元素。然后我使用 $(document).on("click", elem, func)

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

Answer 1

这是因为每次初始化控制器时，您都会在 document 上注册 click 处理程序。每次您导航到其他 page/view 并再次返回同一页面时，控制器都会初始化（即执行控制器中的所有代码），因此 jQuery 会添加一个新的点击事件侦听器每次都在文件上。

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

选项-1:

使用 jQuery 的 off() 在添加新的点击处理程序之前取消注册现有的点击处理程序。

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

选项-2:

使用 Angular 的基于范围的事件处理程序，如 ng-click，当控制器超出范围时，即当您移动到新页面时，它们会自动注销。

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

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

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

 }

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);
            });
        }
    };

});

Jquery Angular 控制器问题中的点击事件：循环多次

Jquery click event inside Angular controller issue: loop many times

javascript

jquery

angularjs

cordova

onsen-ui