AngularJS - $resource + ng-repeat issue

问题

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>

Here's how controller looks:

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

Injected Instructor is the factory:

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:

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.

回答1:

Thanks for the answers.

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.

来源：https://stackoverflow.com/questions/28112078/angularjs-resource-ng-repeat-issue