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

はちょうど私もあなたのフィドル

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>  

を更新しました。この

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

のようにボタンのタグにイベントリスナーを追加セット

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ディレクティブの後ディレクティブは、優先順位を実行されるようにします。 md-list-item postLinkの後にview-employeeディレクティブのpostLinkを優先させることで、クリックハンドラは削除されず、ディレクティブは期待どおりに動作します。

DEMO on JSFiddle。