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; 

当我运行它。组件单击事件侦听器被触发。但该指令无法执行。我不知道是什么原因导致这个问题,我希望他们都能工作。

回答

0

花了一段时间才弄明白。

document.querySelector('.class-name') ; 

返回一个html元素数组。和

angular.element(elem).bind() 

适用于单个角度元素。所以我不得不用一种独特的方式来识别元素我,通过Id。所以我做了什么是

angular.element(document.querySelector('#id')).bind(); 

还有其他的方法来做类名也。我们可以在数组上创建并获取我们的元素并将事件绑定到它。