Директива о прослушивателе событий кликов и $ postLink-клиенте событий не работает вместе

Question

Я использую компонентный дизайн углов для создания этого приложения. Я сделал директиву с эффектом пульсации на кнопке, когда пользователь нажимает на нее. это обычное поведение, поэтому я принял его в директиве. Теперь я хочу добавить еще один прослушиватель событий к той же кнопке из компилятора $ 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; 

Когда я запускаю его. вызывается событие-прослушиватель компонентов. но директива не выполняется. Я не знаю, что вызывает эту проблему, и я хочу, чтобы оба они работали.

Answer 1

потребовалось время, чтобы понять это.

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

возвращает массив элементов html. и

angular.element(elem).bind() 

работает на одном угловом элементе. поэтому мне пришлось использовать уникальный способ идентификации элемента i, e на Id. так что я сделал это

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

есть другие способы сделать это по классу также. мы можем перебрать массив и получить наш элемент и связать событие с ним.