AngularJSのディレクティブ内の子要素へのクリックイベントをバインドします

Question

私は以下の指示文を持っています。

(function() { 
    'use strict'; 
    angular.module('ap.App') 
     .directive('clearCancelFinishButtonsHtml', function() { 
      return { 
       scope: { 
        clearFunction: '=' 
       }, 
       replace: true, 
       templateUrl: 'directives/clearCancelFinishButtons.html', 
       link: function (scope, el, attrs) { 
        var clear= angular.element(el.find('button.clear')); 
        console.log(el.find('.clear')); 
        clear.bind("click", function() { 
         alert("here"); 
        }); 
       } 
      } 
     }); 
})(); 

と

<div class="row pull-right"> 
    <div class="col-lg-12 col-md-12 col-sm-12"> 
     <button type="button" class="custom-default clear">CLEAR</button> 
     <button type="button" class="custom-danger">CANCEL</button> 
     <button type="button" class="custom-info" ng-click="ap.save()">FINISH</button> 
    </div> 
</div> 

を次のように、私がやりたいhtmlファイルを指しているディレクティブ内部clearクラスでボタンをつかむと、それにクリックイベントを渡すことです。何らかの理由で、イベントをクリックすると、それ自体が動作するように見えますが、子要素を保持してバインドすることができませんでした。どんな助けでも大歓迎です。

PS。 私は動的ディレクティブ宣言自体から機能を追加および削除できるようにしたいと、私はこれが起こることを望んでいた---------- <clear-cancel-finish-buttons-html id="{{$id}}" clear-function="'resetConfigurationPageInputs'"> </clear-cancel-finish-buttons-html>

UPDATEとして

をディレクティブを使用しています。

Answer 1

お試しいただきありがとうございます。

私は次のコードを使用しています。

(function() { 
    'use strict'; 
    angular.module('ap.App') 
     .directive('clearCancelFinishButtonsHtml', function() { 
      return { 
       scope: { 
        clearFunction: '=' 
       }, 
       replace: true, 
       templateUrl: 'directives/clearCancelFinishButtons.html', 
       link: function (scope, el, attrs) { 
        var buttons=el.find('button'); 
        angular.forEach(buttons, function(button){ 
         var buttonEl=angular.element(button); 
         if(buttonEl.hasClass("clear")){ 
          buttonEl.bind("click", function() { 
           alert("here"); 
          }); 
         } 
        }) 

       } 
      } 
     }); 
})(); 

コーディングハッピー;）

Answer 2

なぜng-clickを使用していませんか？

あなたはこの

link: function (scope, el, attrs) { 
    scope.clearClick = function() { alert('click') }; 
} 

と

<button type="button" class="custom-default clear" ng-click="clearClick()">CLEAR</button> 

をすれば、それは

Answer 3

あなたはjqueryのを使用している関数を呼び出しますか？なぜなら、そうでなければ.find()メソッドはタグ名だけで動作するからです（クラスセレクタは動作しません）。だからここでの問題は、el.find('.clear')があなたの子要素を取得していないということです。代わりに、このようなdocument.querySelectorを使用します。

var clear= angular.element(el[0].querySelector('button.clear')); 

あなたのプロジェクトでのjQueryを含めていない場合、あなたは唯一のjqliteへのアクセス権を持っています。あなたはjqlite docsの中で何ができるのかできないのかを見ることができます。