Как я могу делегировать событие click в angular?

Как делегировать событие щелчка на моей доске, что я делаю, я говорю элементу найти элемент склассом open-preview , и я не могу сделать это так, как я делаю. Потому что li создается динамически в цикле ruby. Я не знаю, как я могу делегировать событие click в angular вместо find.

HTML-КОД 

<ul>
  <li open-preview>
    <a ng-href="{{product.url}}" title="{{product.brand}}">
      <img ng-src="{{product.urlImage}}" alt="{{product.brand}}">
    </a>
    <div class="descrip-product">
      <p>{{product.descriptionExcerpt}}</p>
    </div>
    <span class="open-preview">Quick view</span>
  </li>
</ul>

КОД ДИРЕКТИВЫ 

var app = angular.module('productPreview'),

 app.directive('openPreview', function($compile, $templateCache, $timeout) {

     return {
         restrict: 'A',
         transclude: false,
         templateNamespace: 'html',
         scope: true,
         link: function(scope, element, attrs) {

             element.find('.open-preview').bind('click', function() {
                // function here
             });
         }
     }
 }):
1 2
angularjs delegates angularjs-ng-click

1 ответ:

Лучше (если не требуется прямо) использовать изолированную область , поскольку вы повторно используете директиву.

В области изолирования можно определить, как директива может вызывать внешнюю (к директиве) функцию - это делается с помощью scope: { param: "&" } 

app.directive('openPreview', function() {
     return {
         restrict: 'A',
         scope: {
            openPreview: "&"
         },
         link: function(scope, element, attrs) {

             element.find('.open-preview').bind('click', function() {
                // invoke the function
                scope.openPreview({p1: 'foo', p2: 'bar'});
             });
         }
     }
 }):

Тогда использование: 

<li open-preview="onPreview(p1, 'xyz', p2)">
  ...
</li>
1