클릭 이벤트 리스너 및 $ postLink 클릭 이벤트 리스너의 지시문이 작동하지 않습니다.

Question

이 응용 프로그램을 빌드 할 때 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; 

내가 실행할 때. 구성 요소 클릭 이벤트 리스너가 시작됩니다. 그러나 지시문은 실행되지 않습니다. 나는이 문제를 일으키는 것이 무엇인지 모르며 둘 다 일하기를 바랍니다.

Answer 1

알아 내기까지 시간이 걸렸습니다.

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

은 html 요소의 배열을 반환합니다. 및

angular.element(elem).bind() 

은 단일 각도 요소에서 작동합니다. 그래서 나는 이드에 의해 엘리먼트 i, e를 식별하는 독특한 방법을 사용해야했습니다. 그래서 내가 한 것은

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

입니다. 클래스 이름으로도 다른 방법이 있습니다. 우리는 배열에 대해 반복하고 요소를 가져 와서 이벤트를 바인딩 할 수 있습니다.