javascript - Angular Controller 内的 Jquery 单击事件问题 : loop many times

Question

我正在开发一个带有 onsen UI(基于 Angular )+phonegap 的应用程序。 所以我在 Angular Controller 中有一个 JQuery 点击事件，这就是问题所在。

当我退回页面堆栈并再次进入时，会多次触发点击事件。

我在 Angular Controller 内使用 jquery click 事件，因为我必须在此事件内使用 Onsen UI 服务。所以我必须在 Controller 内声明这个事件。但这就是问题所在。看:

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

这是因为每次 Controller 初始化时，您都会在文档上注册您的click 处理程序。每次您导航到其他页面/ View 并再次返回同一页面时， Controller 都会被初始化(即执行 Controller 中的所有代码)，因此 jQuery 每次都会在文档上添加一个新的单击事件监听器。

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

选项 1:

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

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

选项 2:

使用 Angular 基于范围的事件处理程序，例如 ng-click，当 Controller 超出范围(即当您移动到新页面时)时，这些处理程序会自动取消注册。

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

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

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

 }

AngularJS 的基本理念之一是将 DOM 操作排除在 Controller 之外，因此我建议采用第二种方法来解决您的问题。甚至还有第三种自定义指令的方法，您可以在其中获取对元素的引用，并且可以使用 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);
            });
        }
    };

});