AngularJS-$ resource + ng-repeat问题 [英] AngularJS - $resource + ng-repeat issue

问题描述

在我的html文件中，有下表:

In my html file I have the following table:

<div ng-controller="InstructorCtrl">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Title</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="instructor in instructors">
          <td>{{instructor.title}}</td>
          <td>{{instructor.name}}</td>
        </tr>
      </tbody>
    </table>
</div>

这是控制器的外观:

angular.module('angularFrontendApp')
  .controller('InstructorCtrl', function ($scope, Instructor) {
    $scope.instructors = [];
    $scope.instructors = Instructor.query();
  });

注入的Instructor是工厂:

angular.module('angularFrontendApp')
  .factory('Instructor', function ($resource) {
    return $resource('http://localhost:9000/api/instructor');      
  });

大多数情况下，表的呈现都很好:

Most of the time the table is rendered just fine:

但是我注意到当我重新加载页面几次时，表有时看起来像这样:

But I noticed that when I reload the page a few times, the table sometimes looks like so:

我认为当$resource的$promise仍未解决时，当ng-repeat启动时会出现问题.因此，我在后端方法中设置了断点，该方法返回了instructors的列表.当执行停止时，仅表头呈现在页面上.当继续执行并从服务器发送数据时，该表就很好了.对我来说似乎很奇怪.

I thought that the problem occurs when the ng-repeat kicks off when the $resource's $promise is still not resolved. So I've set the breakpoint in my backend method which returns the list of instructors. When the execution was stopped, only the table header was rendered on the page. When the execution was continued and data sent from server, the table rendered just fine. Seems pretty strange to me.

推荐答案

感谢您的回答.

我仔细研究了后端调用了哪些方法.实际上，这是一个罕见的服务器端问题，弄乱了路由.

I have taken the closer look at which methods have been called in the backend. It is actually a rare server-side issue that messed up routing.

这篇关于AngularJS-$ resource + ng-repeat问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！