Angular:事件侦听器在指令更改之间递增增加
Angular: event listeners increase incrementally between directive changes
我有一个Angular状态,它可以在三个模板之间旋转,每个模板都由自己的指令控制。指令有事件侦听器,但当我在指令中轮换时,事件侦听器加起来一个,在第一次转换到另一个指令后,一切都开始出错。我试图修复这些错误,但没有成功。以下是三个指令之一的示例:
angular.module('app').directive('presetStationOne', function($interval, $parse, $compile, PresetFactory){
var linker = function(scope, element, attrs){
PresetFactory.assign(1,6,scope);
scope.$watch('page1', function(newVal, oldVal){
if(newVal === true) {
allEncompassing(document, PresetFactory, scope, "start");
}
});
scope.$on('$destroy', function(){
allEncompassing(document, PresetFactory, scope, "finish");
});
};
return {
restrict: 'EA',
scope: false,
link: linker,
templateUrl: 'public/templates/freeplay/presetspage1.html'
};
});
这里是函数allEncompassing()
,它是所有三个presetStation指令。它们都使用PresetFactory,当我从一个指令更改为另一个指令时,对PresetFactory的调用会逐渐增加。
function allEncompassing(document, PresetFactory, scope, msg){
if (msg === "finish"){
removeMyListeners();
}
function clickListen(e){
var f;
if (!e.target.attributes.stationnumber){
if (undefined){
return;
} else if(!e.target.parentNode || !e.target.parentNode.parentNode || !e.target){
return;
} else if (!e.target.parentNode.parentNode.attributes.hasOwnProperty('stationnumber')){
return;
} else {
return f = e.target.parentNode.parentNode.attributes;
}
} else {
return f = e.target.attributes;
}
}
function resetMouseup(PresetFactory){
restartMyListeners();
PresetFactory.mouseUp();
}
function execMouseup(e){
resetMouseup(PresetFactory);
}
function execClickListen(e){
var f = clickListen(e);
if (f !== undefined){
PresetFactory.mouseDown(f, scope);
scope.$digest();
restartMyListeners();
} else {
return;
}
}
function restartMyListeners(){
restartMousedown();
document.removeEventListener('mouseup', execMouseup);
document.addEventListener('mouseup', execMouseup);
}
function restartMousedown(){
document.removeEventListener('mousedown', execClickListen);
document.addEventListener('mousedown', execClickListen);
}
function removeMyListeners(){
document.removeEventListener('mousedown', execClickListen);
document.removeEventListener('mouseup', execMouseup);
}
if (msg === "start"){
restartMyListeners();
}
}
减少增加这些事件侦听器并将其保留为单个事件侦听器的最佳方法是什么?
以下是答案,它比使用事件侦听器容易得多。我想我需要事件监听器,因为我正在观看鼠标按下事件,以确定我应该设置一个广播电台还是更改为一个广播台。相反,我使用了$interval
服务和HTML属性data-ng-mousedown="radioStn(1)" data-ng-mouseup="checkResult()"
:
var dial = null;
var promise = null;
var time = 0;
var check = false;
function defaultVal(){
dial = null;
promise = null;
time = 0;
}
function checkTime(dial, scope, $interval, $rootScope, PresetFactory){
$interval.cancel(promise);
if (check === true){
console.log(dial + ' check is true');
PresetFactory.setPreset(dial, scope);
} else {
console.log(dial + ' check is false');
PresetFactory.changeStn(dial);
}
defaultVal();
}
angular.module('app').directive('presetStationOne', function($rootScope, $interval, $parse, $compile, PresetFactory){
var linker = function(scope, element, attrs){
PresetFactory.assign(1,6,scope);
scope.radioStn = function(x){
dial = x;
promise = $interval(function(){
time += 100;
console.log(time);
if (time >= 1000){
check = true;
checkTime(dial, scope, $interval, $rootScope, PresetFactory);
return;
}
}, 100);
};
scope.checkResult = function(){
if (check === true){
check = false;
return;
} else {
checkTime(dial, scope, $interval, $rootScope, PresetFactory);
}
};
scope.$on('$destroy', function(){
defaultVal();
check = false;
});
};
return {
restrict: 'EA',
scope: false,
link: linker,
templateUrl: 'public/templates/freeplay/presetspage1.html'
};
});
相关文章:
- JQuery使计数器每次更改时都会增加
- 函数参数中的数据与指定变量之间的任何性能差异
- 全局变量和全局对象的属性之间有什么区别吗
- java.net和javascript之间正则表达式的差异
- JavaScript中的函数和对象之间没有区别吗?
- 获取@ResponseBody的一部分作为主干和Spring MVC控制器之间的参数
- Jquery在函数之间传递表行
- 根据某些条件在视图之间切换
- 在控制器和数据对象之间同步数据
- 如何增加同时按键总数
- d3中堆栈函数和嵌套函数之间的差异
- JQuery:在页面之间滑动
- 增加了网站上项目之间的空间
- Chartist.js-增加Y轴刻度点之间的间距
- 增加从节点a到节点b的链路之间的距离
- 如何增加链接或链接标签之间的距离
- 砌体布局(有时)在项目之间增加1个排水沟
- Angular:事件侦听器在指令更改之间递增增加
- 计算对象键对值之间的增加/减少
- 增加谷歌地图标记之间的延迟