Jquery 触发事件两次的角度指令
我正在创建一个滑入指令来显示一些选项。标题中有3个按钮,即“后退”、“取消全部”和“应用”。现在,当我单击任何按钮时,“单击”事件将触发两次。请看下面的代码 HTML:Jquery 触发事件两次的角度指令,jquery,angularjs,angularjs-directive,event-handling,jquery-events,Jquery,Angularjs,Angularjs Directive,Event Handling,Jquery Events,我正在创建一个滑入指令来显示一些选项。标题中有3个按钮,即“后退”、“取消全部”和“应用”。现在,当我单击任何按钮时,“单击”事件将触发两次。请看下面的代码 HTML: 我已经成功地解决了这个问题。回答我的问题以帮助某人: 更新指令代码: angular.module('MyAppObj') .directive('searchFilter', [function () { function link(scope, element, attrs){ $(document)
我已经成功地解决了这个问题。回答我的问题以帮助某人: 更新指令代码:
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
};
}]);
你确定你没有两次使用指令吗?如果您在link方法的第一行上放置断点,它是否会被命中两次?因为您将所有这些都附加到文档中,所以每当您将此指令加载到应用程序中时,这些事件都会被反弹。这段HTML代码是否隐藏在某种ng if后面?如果是这样,每次ng If求值为true时,所有这些都将绑定一个新事件。@BillBergquist-您已经正确地猜测了问题的根本原因。但现在的问题是如何处理这种情况?因为我必须使用指令。。。
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...')
});
}
};
}]);
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
};
}]);