2

내 보드에서 click 이벤트를 위임 할 수있는 방법은 무엇입니까? 클래스 열기 미리보기을 가진 요소를 찾기 위해 요소에 지시합니다. 그러면 할 수 없습니다. 왜냐하면 리는 루비 루프에서 동적으로 생성되기 때문입니다. 클릭 이벤트를 찾기 대신 각도로 위임 할 수있는 방법을 모르겠습니다.click 이벤트를 각도에서 위임 할 수 있습니까?

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> 

DIRECTIVE 코드

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

클릭하다? –

+0

왜 li을 클릭하지 않습니까? –

+0

참조 http://stackoverflow.com/questions/13965627/angular-ng-click-event-delegation –

답변

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> 
관련 문제