クリックイベントリスナと$ 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() 

は、1つの角度要素で動作します。だから私はidによって要素i、eを識別するユニークな方法を使用しなければならなかった。だから私は何だった

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

それはクラス名でもやっている他の方法があります。配列全体を処理し、要素を取得してイベントをバインドすることができます。