0
我正在使用angular1的组件设计来构建此应用程序。当用户点击按钮时,我做了一个指令,在按钮上产生连锁反应。这是一种常见的行为,所以我在指令中采用了它。 现在我想添加另一个事件监听器到组件控制器$ postLink()钩子中的同一个按钮,这会导致指令事件监听器在执行中失败。
如何解决这个问题。我想要听两个事件。
下面是我的涟漪效应指令。我正在使用commonjs加载模块,所以不要被这些打扰。
var app=require('../../../../Development/Assets/Js/appConfig');
app.directive('wave',waveConig);
waveConig.$inject=['$compile','$timeout'];
function waveConig($compile,$timeout){
return{
restrict:'A',
link:waveLink
};
function waveLink(scope,elem,attr){
var waveColor = attr.color;
elem.unbind('mousedown').bind('mousedown', function (ev) {
var el = elem[0].getBoundingClientRect();
var top = el.top;
var left = el.left;
var mX = ev.clientX - left;
var mY = ev.clientY - top;
var height = elem[0].clientHeight;
var rippler = angular.element('<div/>').addClass('wave');
rippler.css({
top: mY + 'px',
left: mX + 'px',
height: (height/2) + 'px',
width: (height/2) + 'px',
});
if (waveColor !== undefined || waveColor !== "") {
rippler.css('background-color', waveColor);
}
angular.element(elem).append(rippler);
$compile(elem.contents())(scope);
$timeout(function() {
angular.element(rippler).remove();
}, 500);
});
}
}
下面是我的组件控制器代码。
verifyCtr.$inject=['$element','verifyService','$scope'];
function verifyCtr($element,verifyService,$scope){
console.log('verify component is up and working');
var $this=this;
var serviceObj={
baseUrlType:'recommender',
url:'https://httpbin.org/ip',
method:1,
data:{}
};
$this.$onInit=function(){
verifyService.getData(serviceObj,{
success:function(status,message,data){
$this.data=data;
},
error:function(status,message){
alert(status,'\n',message);
}
});
};
$this.$onChanges=function(changes){};
$this.$postLink=function(){
angular.element(document.querySelector('.addNewTag')).bind('click',function(){
console.log('hi there you clicked this btn');
});
};
$this.$onDestroy=function(){
angular.element(document.querySelector('.addNewTag')).unbind('click');
var removeListener=$scope.$on('someEvent',function(ev){});
removeListener();
};
}module.exports=verifyCtr;
当我运行它。组件单击事件侦听器被触发。但该指令无法执行。我不知道是什么原因导致这个问题,我希望他们都能工作。