Связать событие click с дочерним элементом внутри директивы 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"); 
        }); 
       } 
      } 
     }); 
})(); 

и указывает на HTML файл следующим образом

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

То, что я хотел сделать, это взять на кнопку с clear класса внутри директивы и передать событие щелчка к нему. По какой-то причине, сам по себе элемент click to element, похоже, работает, но я не мог удержать дочерний элемент, чтобы связать его. Любая помощь будет высоко ценится.

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.