我有一个带有过滤器,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属性作为输入的默认值,然后不必检查“搜索”的值

07-24 17:18
查看更多