angularjs服務工作不正常

Question

我有這樣的服務：

angular.module('autotestApp').factory('GroupService', ['$http', function ($http) { 
    var groups = []; 

    return{ 
     list: function() { 
      return groups; 
     }, 
     retrieve: function() { 
      $http({ 
       method: "get", 
       url: "/enterprises/_groups" 
      }).success(function (response) { 
       groups = response; 
      }).error(function() { 
       console.log("failed") 
      }); 
     } 
    } 
}]); 

，這是我的控制器：

angular.module('autotestApp').controller('GroupsController', function($scope, $http, GroupService) { 
    GroupService.retrieve(); 
    $scope.items = GroupService.list(); 
}); 

所以，在我的控制，我第一次收到來自API的結果使變量組（在服務中）被分配，然後我使用list（）方法將值賦給$ scope.items。

我確定API正在返回結果。但是

groups = response 

部件無法正常工作。當我把它改成

groups.push(response) 

這是工作，但結果是一個列表內的列表，這是我想dont't：[對象，對象，對象]

我想這一點：[對象，對象，對象]

如何解決這個問題？

Answer 1

原因

groups = response 

不工作是因爲你發送一個異步請求，它將取代組引用您已經取回經list功能的舊引用後。它與push修改一起工作的原因是Angular創建了一個手錶，注意到集合已更改並更新了您的視圖。然而，你的代碼現在正在工作，但你不明白它爲什麼會起作用，並且容易意外打破。

在處理異步代碼時，處理它的最好方法是編寫自己的代碼來將其考慮在內。這是一個以異步方式完成整個事情的版本：

angular.module('autotestApp').factory('GroupService', ['$http', function ($http) { 
    var groupsResult; 

    return{ 
     retrieve: function() { 
      if (groupsResult) { return groupsResult; } 
      return groupsResult = $http({ 
       method: "get", 
       url: "/enterprises/_groups" 
      }).then(function (response) { 
       return response.data; 
      }, function() { 
       console.log("failed") 
      }); 
     } 
    } 
}]); 

angular.module('autotestApp').controller('GroupsController', 
    ['$scope', 'GroupService', function($scope, GroupService) { 
     GroupService.retrieve().then(function (groups) { 
      $scope.items = groups; 
     }); 
    }]); 

Answer 2

一個你可以使用修復的是：

for (var i = 0; i < response.length; i++) { 
    groups.push(response[i]); 
}); 

這樣，你將有[ Object, Object, Object ]

編輯：你可以嘗試

一件事是下面的，改變你的檢索函數返回您的承諾：

return{ 
      list: function() { 
       return groups; 
      }, 
      retrieve: function() { 
       var promise = $http({ 
        method: "get", 
        url: "/enterprises/_groups" 
       }).success(function (response) { 
        groups = response; 
       }).error(function() { 
        console.log("failed") 
       }); 

       return promise; 
      } 
     } 

，然後在你的控制器：

angular.module('autotestApp').controller('GroupsController', function($scope, $http, GroupService) { 
    GroupService.retrieve().finally(function() { 
     $scope.items = GroupService.list(); 
    }); 
}); 

我覺得你groups = response工作，但是當你做$scope.items = GroupService.list()請求尚未完成。

Answer 3

做groups.concat(response) 這會使條款變平坦&將其添加到父列表而不是附加單個元素。