Direktive für Klick-Ereignis-Listener und $ postLink Klick-Ereignis-Listener arbeiten nicht zusammen

Question

Ich benutze das Komponenten-Design von angular1, um diese Anwendung zu erstellen. Ich habe eine Direktive gemacht mit wirkt sich auf eine Schaltfläche aus, wenn der Benutzer darauf klickt. Das ist ein allgemeines Verhalten, also habe ich es in der Richtlinie übernommen. jetzt möchte ich einen anderen Ereignis-Listener zu der gleichen Schaltfläche von der Komponente $ postLink() Hook hinzufügen, die verursacht, dass der Listener für den Direktive-Event bei der Ausführung fehlschlägt.

wie Sie dieses Problem lösen. Ich möchte beide Ereignisse hören.

unten ist meine Ripple-Effekt-Richtlinie. Ich benutze commonjs, um die Module zu laden, also stört mich nicht.

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); 

    }); 
} 
} 

unten ist mein Component-Controller-Code.

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; 

wenn ich es betreibe. Der Klickereignis-Listener der Komponente wird ausgelöst. aber die Direktive wird nicht ausgeführt. Ich weiß nicht, was dieses Problem verursacht, und ich möchte, dass beide funktionieren.

Answer 1

es dauerte eine Weile, um es herauszufinden.

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

gibt ein Array von HTML-Elementen zurück. und

angular.element(elem).bind() 

arbeitet auf einem einzelnen Winkelelement. Also musste ich eine einzigartige Möglichkeit nutzen, um das Element i, e durch die ID zu identifizieren. Also was ich getan habe war

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

gibt es andere Möglichkeiten, es durch den Klassennamen auch zu tun. Wir können über das Array gehen und unser Element erhalten und das Ereignis daran binden.