在 ng-resource 调用完成后更新 ng-repeat

Update ng-repeat after ng-resource call is finished

我将 ngResource 与 ng-repeat 结合使用,发现缓慢的 REST 调用无法正确更新列表。它一直是空的。

据我所知,我需要控制器和 ng-repeat 元素之间的绑定。

我的资源和控制器定义:

(function (configure) {
    configure('loggingResource', loggingResource);

    function loggingResource($resource, REST_CONFIG) {
        return {
            Technical: $resource(REST_CONFIG.baseUrl + REST_CONFIG.path + '/', {}, {
                query: {
                    method: 'GET',
                    isArray: true
                }
            })
        };
    }
})(angular.module('loggingModule').factory);

(function (configure) {
    configure('logController', logController);

    function logController(loggingResource) {
        var that = this;
        loggingResource.Technical.query(function (data) {
            that.logs = data;
        });
        //that.logs = loggingResource.Technical.query();
    }
})(angular.module('loggingModule').controller);

ng.repeat 用法:

<tr class="table-row" ng-repeat="log in logController.logs">

到目前为止我尝试过的:

我错过了什么?

我尝试在 plnkr 上获取它:https://plnkr.co/edit/t1c5Pxi7pzgocDMDNITX

尝试使用

that.logs.push(data)

所以你防止重新初始化日志列表。如果您覆盖日志列表并且 ng-repeat 在日志列表之前初始化,它似乎无法解决。 休息电话后您的日志列表是否设置正确?

{{}} 提供了控制器和视图之间的默认绑定,您无需显式添加任何内容。我已经更新了你的 plunkr,对注入的常量等做了一些小的改动,它正在工作。

// Code goes here
angular.module("loggingModule", ['ngResource']);

(function(configure) {
  configure('loggingResource', loggingResource);

  function loggingResource($resource) {
    return {
      Technical: $resource('https://api.github.com/users/addi90/repos', {}, {
        query: {
          method: 'GET',
          isArray: true
        }
      })
    };
  }
})(angular.module('loggingModule').factory);

(function(configure) {
  configure('logController', logController);

  function logController(loggingResource) {
    var that = this;
    that.logs = [{
      title: 'test2'
    }];
    loggingResource.Technical.query(function(data) {
      that.logs = data;
    });
    //that.logs = loggingResource.Technical.query();
  }
})(angular.module('loggingModule').controller);

由于 api 资源无法正常工作,我在那里使用了我的 github 存储库 api link

更新后的工作插件可在此处获得:https://plnkr.co/edit/cederzcAGCPVzc5xTeac?p=preview