ng-repeat 列表在 api 调用后不会立即更新

Question

我的网络应用程序视图在嵌套列表中列出文件夹及其子项：

<ul>
  <li class="folderLi" ng-repeat="folder in folders">
    <a href="" ng-click="listFolderFiles( folder )">{{folder.title}}</a>
    <ul >
      <li ng-repeat="child in folder.children">
          {{child.title}}
      </li>
    </ul>
  </li>
</ul>

当我加载文件夹的初始列表时，列表会立即更新以显示文件夹。但是，此时每个文件夹上都没有子对象。当单击文件夹并且应用程序调用 Google Drive API 来检索文件夹的子项时，就会填写该信息。控制器包含这个功能：

$scope.listFolderFiles = function( folder ) {
  var request = gapi.client.request({
    'path': '/drive/v2/files',
    'method': 'GET',
    'params' : {
        'q' : "'" + folder.id + "' in parents"
      }
  });


request.then(function(response){
     //log successful response
     console.log(response);
     folder.children = response.result.items;
           }, function(response) {
     //log error
      console.log(response);
   })
  }

此函数正确检索信息并更新模型。但是，子项的 ng-repeat 列表不会立即更新和显示。相反，它会在下次单击文件夹时更新并显示。似乎这个函数在 api 调用完成之前更新了视图，所以下次函数运行时，视图会更新以显示最后一次 API 调用的响应。想法？

Answer 1

您正在尝试更新 Angular 之外的知识。所以你的观点没有更新。您需要使用$scope.$apply() 或$timeout 来运行摘要循环。

request.then(function(response){
     //log successful response
     console.log(response);
     //folder.children = response.result.items; //Required in case of $scope.$apply()
     $timeout(function(){folder.children = response.result.items;}); //Or $scope.$apply(); (Don't forget to inject $timeout in your controller)
           }, function(response) {
     //log error
      console.log(response);
   })
  }