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

Question

我正在尝试将自定义指令附加到 ng-repeat 中的项目使用 md-list 创建的列表/md-list-item s，但由于 Angular Material 结构的方式 md-list-item元素在 DOM 中编译时，为 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);
            })
        }
    }
})

我也更新了你的 fiddle

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