我有一个带有过滤器,limitTo和指令的ng-repeat。过滤器来自输入字段,列表过滤良好。我正在尝试在重复完成指令中跟踪$ last,这在大多数情况下都可以正常工作,但是当输入字段中的某些指令不会在$ last上触发时,会出现某些字符串。
我在这里放了一个小提琴
https://jsfiddle.net/1bzg1p7t/19/
<ul>
<li ng-repeat="item in vm.items | inputFilter:vm.inputSearch |limitTo: vm.limit" repeat-finish>{{item.showroomName}}</li>
</ul>
问题字符串:'yoo'
如果在输入字段中输入上面的字符串,您将看到警报不会在“ yo”之后“触发”,但在删除“ o”时会触发。
对于$ last为什么不触发的任何帮助,将不胜感激。谢谢
最佳答案
链接功能负责注册DOM侦听器以及更新DOM。克隆模板后执行。这是放置大多数指令逻辑的地方。
link函数仅在克隆模板(添加到dom)后才执行-这里的模板是您的<li>
项。
当您键入“ yo”时,过滤器功能会过滤掉不匹配的项目,并将匹配的项目保留在列表中。键入最后一个“ o”后,其余项将被删除,仅剩下“ YND Group LLC,DBA Seeka和Yoolie's”。
因为当您键入“ yo”时,“ YND Group LLC,DBA Seeka和Yoolie的”项已经在列表中(并且在DOM中),所以当您键入最后一个“ o”时,链接函数不会再次触发
链接功能触发时,我已经分叉了您的jsfiddle并为每个项目添加了一个计数器。当您键入“ yoo”时,您将看到“已执行链接功能”值将为1,因为它仅触发一次。
更新的指令:
.directive('repeatFinish', function($timeout){
return {
restrict: 'A',
link: function (scope, element, attr) {
if(scope.item.linkFunctionExecuted){
scope.item.linkFunctionExecuted++;
}else{
scope.item.linkFunctionExecuted = 1;
}
if (scope.$last === true) {
$timeout(function () {
//console.log('--------------------------------------end');
});
}
}
};
});
更新的HTML:
<body ng-app="app">
<div ng-controller="Main as vm">
<input type="text" ng-model="vm.inputSearch">
<ul>
<li ng-repeat="item in vm.items | inputFilter:vm.inputSearch |limitTo: vm.limit" repeat-finish>{{item.showroomName}} Link Function Executed{{item.linkFunctionExecuted}} times</li>
</ul>
</div>
与问题无关,只是一个提示:您可以使用placeholder属性作为输入的默认值,然后不必检查“搜索”的值