Binding Click Event zu Kind Element innerhalb der Direktive von AngularJS

Question

Ich habe folgende Direktive.

(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"); 
        }); 
       } 
      } 
     }); 
})(); 

und es zeigt auf die HTML-Datei wie folgt

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

Was ich wollte, den Knopf mit clear Klasse innerhalb der Richtlinie zu tun ist, zu packen und ein Click-Ereignis, um es passieren. Aus irgendeinem Grund scheint Click to Element selbst zu funktionieren, aber ich konnte das Halten des Kindelements nicht erreichen, um es zu binden. Jede Hilfe wird sehr geschätzt.

PS. Ich bin mit der Richtlinie als <clear-cancel-finish-buttons-html id="{{$id}}" clear-function="'resetConfigurationPageInputs'"> </clear-cancel-finish-buttons-html>

UPDATE ----------

Ich wollte dies geschehen kann, wie ich dynamisch in der Lage sein wollen, hinzufügen und entfernen Funktion aus der Richtlinie Erklärung selbst .

Answer 1

Vielen Dank für den Versuch,

Ich habe es mit dem folgenden Code zu arbeiten.

(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"); 
          }); 
         } 
        }) 

       } 
      } 
     }); 
})(); 

Glücklich Codierung;)

Answer 2

warum verwenden Sie nicht ng-click?

wenn Sie dies tun

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

und

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

dann ruft es die Funktion

Answer 3

werden Sie jquery verwenden? denn wenn nicht, dann funktioniert die .find() Methode nur mit Tag-Namen (Klassen-Selektoren funktionieren also nicht). Also das Problem hier ist, dass el.find('.clear') nicht Ihr Kind Element bekommt. Verwenden Sie stattdessen document.querySelector wie folgt aus:

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

Wenn Sie nicht jquery in Ihrem Projekt einschließlich dann nur Sie Zugriff haben jqlite. Sie können sehen, was mit ihm in der jqlite docs kann und nicht getan werden kann.