Question

如何在我的主板上委托点击事件，我做的是告诉元素找到类打开预览的元素而我不能像我那样做。因为li是在ruby循环中动态创建的。我不知道如何以角度而不是find来委托点击事件。

HTML CODE

<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
             });
         }
     }
 }):

Answer 1

使用isolate scope会更好（如果不是完全必要的话），因为您正在重复使用该指令。

在隔离范围中，您可以定义指令如何调用外部（指令）函数 - 这是通过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 个答案: