Question

我尝试将自定义指令附加到使用ng-repeat / md-list s创建的md-list-item列表中的项目，但是因为角度材料构造{{{ 1}}元素在DOM中编译时，在md-list-item功能中嵌套一个绝对定位按钮，我无法找到一种方法将指令属性实际附加到这些按钮，因为我可以正常ng-click或类似。

我已经对其他元素的指令进行了测试，它很好，并尝试将其直接附加到md-button，但这显然不起作用。

在JSFiddle中展示：http://jsfiddle.net/2f6qscrp/513/。

HTML：

md-list-item

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。

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

2 个答案: