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

问题描述

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

<table class="table table-bordered"><头><tr><th>Title</th><th>姓名</th></tr></thead><tr ng-repeat="讲师中的讲师"><td>{{instructor.title}}</td><td>{{instructor.name}}</td></tr></tbody>

控制器的外观如下:

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

注入的Instructor是工厂:

angular.module('angularFrontendApp').factory('讲师', 函数 ($resource) {return $resource('http://localhost:9000/api/instructor');});

大多数情况下，表格渲染得很好:

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

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

解决方案

感谢您的回答.

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

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.

解决方案

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.

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