Question

现在我有这个html重复自己根据一个对象数组创建一个列表。

      <md-list class="proj-list">
        <md-item ng-repeat="it in projects track by it.ProjectID">
          <md-item-content>
            <md-button ng-click="selectProject(it)" ng-class="{'selected' : it === selected }">
              {{it.ProjectID}}
            </md-button>
          </md-item-content>
        </md-item>
      </md-list>

控制器在这里：

  $scope.selected = null;
  $scope.projects = allProjects;
  $scope.selectProject = selectProject;
  $scope.toggleSidenav = toggleSidenav;

  loadProjects();

  function loadProjects() {
    myService.loadAll()
      .then(function(projects){
        allProjects = projects;
        $scope.projects = [].concat(projects);
        $scope.selected = $scope.projects[0];
        console.log($scope.projects); 
      })
  }

和myService：

var request = $http.get('http://localhost:9001/api/descriptions') ;

request.success(function(data, status, headers, config) {
  for(var i=0; i<data.length; i++){
    projects.push(data[i]);
  }
    console.log(projects);
});
request.error(function(data, status, headers, config) {
    alert( "failure message: " + JSON.stringify({data: data}));
});


  return {
      loadAll: function() {
          console.log(projects);  
          return $q.when(projects);
      }
  };

我希望代码运行的顺序是： http从服务器获取数据 - ＆gt; loadAll将数据发送到控制器 - ＆gt; ng-repeat在HTML上生成列表

但发生的事情是： ng-repeat生成列表（空） - ＆gt; loadAll将数据发送到控制器（无） - ＆gt; http从服务器获取数据

如何控制代码执行的顺序？我尝试了$scope.$apply()命令，但它说我已经运行了$ digest或$ apply命令，但我没有请求任何这个。

Answer 1

问题不在你想象的地方。观察者的原则是当模型更新时dom被重新渲染。因此，在你的ajax调用返回到客户端之前，你的ng-repeat应该在初始摘要时第一次呈现为空，然后第二次呈现$ scope.projects。

真正的问题在于您的服务。你似乎有一个理解承诺如何运作的问题。使用您当前的代码，您的服务的loadAll方法会立即使用空列表解析。

return {
  loadAll: function() {
    return $http.get('http://localhost:9001/api/descriptions').then(function(response) {
      return response.data
    })
  }
};

应该可以更好地运作。

如何在从外部源接收数据后刷新ng-repeat

1 个答案: