각도 재질 - md-list-item 요소에 사용자 지정 지시 특성을 연결하는 방법은 무엇입니까?

Question

나는 md-list/md-list-item들과 함께 만든 ng-repeat 목록의 항목에 사용자 정의 지침을 첨부하려고하지만이기 때문에이 ng-click을위한 내에서 절대 위치 지정된 버튼을 중첩, DOM을 컴파일 년대 md-list-item 요소 방법으로 각 자료 구조 기능성, 나는 정상적인 수 md-button 또는 이와 유사한 수있는 지시문 특성을 실제로 첨부 할 수있는 방법을 찾을 수 없습니다.

나는 괜찮 으면 다른 요소에 대한 지침을 테스트했으며 md-list-item에 직접 연결하려고 시도했지만 분명히 작동하지 않습니다.

JSFiddle에서 시연 : http://jsfiddle.net/2f6qscrp/513/.

HTML :

<md-list-item view-employee employee="employee" ng-click="viewEmployee($index)" ng-repeat="employee in main.employees"> 

Answer 1

은 당신의 바이올린 나는 또한 업데이트 한이

angular.module('app').directive('viewEmployee', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      employee: '=' 
     }, 
     link: function(scope, element, attrs) { 
      element.find('button').bind('click', function(index, employee) { 
       alert('viewEmployee(): ' + scope.employee.forename + ' ' + scope.employee.surname); 
      }) 
     } 
    } 
}) 

처럼 버튼 태그에 이벤트 리스너를 추가

http://jsfiddle.net/2f6qscrp/514/

Answer 2

<md-list-item view-employee employee="employee" 
       ng-click="viewEmployee($index)" 
       ng-repeat="employee in main.employees"> 

    <b>{{employee.id}}</b> 

    <span>{{employee.forename}} {{employee.surname}}</span> 

</md-list-item>  

세트 우선 순위가되도록 지시어는 md-list-item 지시 한 후 실행 :

angular.module('app').directive('viewEmployee', function() { 
    return { 
     priority: 10, 
     restrict: 'A', 
     scope: { 
      employee: '=' 
     }, 
     link: function(scope, element, attrs) { 
      element.bind('click', function(index, employee) { 
       console.log('viewEmployee(): ' + scope.employee.forename 
          + ' ' + scope.employee.surname); 
      }) 
     } 
    } 
}) 

md-list-item 지시어는 요소에서 핸들러를 클릭하여 제거합니다. md-list-item postLink 이후에 view-employee 지시문의 우선 순위를 설정하여 클릭 링크를 처리하면 클릭 핸들러가 제거되는 것을 방지하고 지시문이 예상대로 작동합니다.

DEMO on JSFiddle.