Angular Material - 如何将自定义指令属性附加到md-list-item元素？

Question

我正在尝试将自定义指令附加到使用ng-repeat / md-lists创建的md-list-item列表中的项目，但是由于角度材料在DOM中编译时构造md-list-item元素的方式，为ng-click功能嵌套绝对定位按钮，找不到一种方法来实际将指令属性附加到这些，因为我可以正常的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指令从元素中删除了单击处理程序。通过将view-employee指令的优先级设置为在md-list-item postLink之后执行postLink，单击处理程序可以避免被删除并且指令按预期工作。

DEMO on JSFiddle。