ng-重复项在父指令的后链接功能中不可用

Question

我想从"托管"指令的功能中绑定ng-repeatpost-link项目上的事件侦听器。但是在post-link调用期间ng-repeat项目尚未呈现(请参阅控制台登录 plunker(。

在阅读了有关指令生命周期(https://www.toptal.com/angular-js/angular-js-demystifying-directives(的文章后，我得到了一个印象，即post-link所有HTML都应该已经可用并准备好添加事件侦听器。

ng-repeat有什么不同吗？

法典：

angular
.module('myModule', [])
.directive('myDirective', 
function() { 
return {
scope: { items: '=' },
restrict: 'E',
templateUrl: 'myTemplate.html',
link: function (scope, element) {
console.log(element.html());
var anchors = element.find('a');
console.log(anchors); 
anchors.on('focus', function() {
console.log('I have focus');
});
}
};
}
);

模板：

<ul>
<li ng-repeat="item in items">
<a href="javascript:;">{{item}}</a>
</li>
</ul>

普伦克：https://next.plnkr.co/edit/99qi4eliISMeEWD2?preview

Answer 1

ng-repeat有什么不同吗？

ng-repeat根据数据添加和销毁 DOM。.find操作找不到元素，因为它们尚未添加到 DOM 中。

在框架将元素添加到 DOM 时调用的指令中添加事件处理程序：

app.directive("myFocus", function() {
return {
link: postLink
};
function postLink(scope, elem attrs) {
elem.on('focus', function() {
console.log('I have focus');
});
}
})

用法

<ul>
<li ng-repeat="item in items">
<a my-focus href="javascript:;">{{item}}</a>
</li>
</ul>

当myFocus指令将元素添加到 DOM 时，ng-repeat指令将添加事件处理程序。