Angular 指令触发事件两次答案

【问题标题】：Angular directive triggering the event twiceAngular 指令触发事件两次
【发布时间】：2015-03-25 19:27:12
【问题描述】：

我正在创建一个滑入指令来显示一些选项。在标题中有 3 个按钮，即“返回”、“取消选择”和“应用”。现在，当我单击任何按钮时，会触发两次“单击”事件。请看下面的代码。

HTML：

<aside class="search-filter-slide fullheight search-filter ng-hide">
        <div class="search-filter-by clearfix row" id="searchFiltersAction">
            <button class="btn btn-sm btn-info pull-left" id="searchFilterBackBtn">Back</button>
            <button class="btn btn-sm btn-link" id="deselectAllFilters">deselect all</button>
            <button class="btn btn-sm btn-primary pull-right" id="applyFiltersBtn">Apply</button>
        </div>
</aside>

指令：

angular.module('MyAppObj')
.directive('searchFilter', [function () {
  return {
      restrict: 'CA',
      link: function (scope, element, attrs) {
          $(document).on('click','#searchFilterBtn.search-filter-btn',function(e){
              e.stopPropagation();
              $(element).removeClass('ng-hide');
              setTimeout(function () { $(element).addClass('slide-in'); }, 200);
          });

          $(document).on('click','#searchFiltersAction #searchFilterBackBtn',function(e){
              e.stopPropagation();
              console.log('Closing the open filters view...',e.target.tagName)
              $(element).removeClass('slide-in');
              setTimeout(function () { $(element).addClass('ng-hide'); }, 500);
          });

          $(document).on('click','#searchFiltersAction #deselectAllFilters',function(e){
              e.stopPropagation();
              console.log('Deselect all selected filters...')
          });

          $(document).on('click','#searchFiltersAction #applyFiltersBtn',function(e){
              e.stopPropagation();
              console.log('Apply selected filters to the search results...')
          });
      }
  };
}]);

【问题讨论】：

你确定你没有使用该指令两次吗？如果在链接方法的第一行设置断点，它会被命中两次吗？
由于您将所有这些附加到文档中，因此每当您将此指令加载到应用程序中时，这些事件都会被反弹。这个 HTML sn-p 在某种 ng-if 后面吗？如果是这样，每次ng-if 评估为真时，都会为所有这些绑定一个新事件。
@BillBergquist - 您已经正确猜到了问题的根本原因。但现在的问题是如何处理这种情况？因为我必须使用指令...

标签： jquery angularjs angularjs-directive event-handling jquery-events

【解决方案1】：

我已经成功地处理了这个场景。回答我的问题以便它可以帮助某人：

更新指令代码：

angular.module('MyAppObj')
.directive('searchFilter', [function () {
    function link(scope, element, attrs){
        $(document).on('click','#searchFilterBtn.search-filter-btn',function(e){
              e.stopPropagation();
              $(element).removeClass('ng-hide');
              setTimeout(function () { $(element).addClass('slide-in'); }, 200);
          });

          $(document).on('click','#searchFiltersAction #searchFilterBackBtn',function(e){
              e.stopPropagation();
              console.log('Closing the open filters view...',e.target.tagName)
              $(element).removeClass('slide-in');
              setTimeout(function () { $(element).addClass('ng-hide'); }, 500);
          });

          $(document).on('click','#searchFiltersAction #deselectAllFilters',function(e){
              e.stopPropagation();
              console.log('Deselect all selected filters...')
          });

          $(document).on('click','#searchFiltersAction #applyFiltersBtn',function(e){
              e.stopPropagation();
              console.log('Apply selected filters to the search results...')
          });

          var cleanup = function(){
            $(document).off('click','#searchFilterBtn.search-filter-btn');
            $(document).off('click','#searchFiltersAction #searchFilterBackBtn');
            $(document).off('click','#searchFiltersAction #deselectAllFilters');
            $(document).off('click','#searchFiltersAction #applyFiltersBtn');
          }

          scope.$on('$destroy',cleanup)
    }
  return {
      restrict: 'CA',
      link: link
  };
 }]);

【讨论】：