如何等到ng-repeat完成循环？

我有一个从服务器获取json并将其附加到列表的示例。如何等到ng-repeat完成循环？

脚本：

$http.get('/data/json/cities.json').then(function (res) { 
    if (res.status === 200) { 
     $scope.cities = res.data; 
    } 
});

HTML：

<li ng-repeat="(id, name) in cities" id="{{id}}"> 
    <a href="#" ng-bind="name"></a> 
</li>

在那里我卡住代码：

if (res.status === 200) { 
    $scope.cities = res.data; 

    // from here 
    console.log($('li#NY').length); // 0 

    // waiting 1 second and try again 
    setTimeout(function() { 
     console.log($('li#NY').length); // 1 
    }, 1000); 
}

JSON对象包含密钥NY但我只能分配给1秒（或1秒）后的对象（li标签id为NY） onger）。

是否有另一种方法来知道什么时候对象（在这种情况下为$('li#NY')）已经创建成功，而不使用setTimeout？

来源

2017-05-26 Vayne

什么是你想要做什么呢？代码中不清楚为什么你需要这些信息。 – Karim

尝试使用'ng-repeat-end'指令 –

@Karim什么不清楚？该列表包含'$（'li＃NY'）'对象，并且该对象将在获取json之后创建。但是当我得到json时，我只能在1秒后分配给对象。 – Vayne

您必须创建一个指令，请按照下面的代码。

var module = angular.module('app', []) 
     .directive('onFinishRender', function ($timeout) { 
     return { 
      restrict: 'A', 
      link: function (scope, element, attr) { 
       if (scope.$last === true) { 
        $timeout(function() { 
         scope.$emit(attr.onFinishRender); 
        }); 
       } 
      } 
     } 
    });

然后在你的控制器，你可以用$上赶上它：

$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) { 
    //you also get the actual event object 
    //do stuff, execute functions -- whatever... 
    console.log($('li#NY').length); // 1 
});

的HTML看起来像这样：

<li ng-repeat="(id, name) in cities" id="{{id}}" on-finish-render="ngRepeatFinished"> 
    <a href="#" ng-bind="name"></a> 
</li>

来源

2017-05-26 16:50:45 LXhelili

它的工作原理。谢谢！你能解释一下为什么我需要'$ timeout'吗？ – Vayne

$ timeout确保在ng-repeated元素已完成渲染时执行它（因为$ timeout将在当前摘要循环结束时执行 - 并且它也将在内部调用$ apply，与setTimeout不同）。所以在ng-repeat完成之后，我们使用$ emit来发送事件给外部作用域（同级和父级作用域）。 – LXhelili

如何等到ng-repeat完成循环？

回答

相关问题