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

Question

我正在尝试将自定义指令附加到使用 md-list/md-list-item 创建的 ng-repeat 列表中的项目，但由于 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/

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.

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

Angular Material - How to attach custom directive attribute to md-list-item element?

javascript

angularjs

angularjs-directive

angularjs-material