將數據從json文件中提取到angularjs服務中

Question

 angular.module('testJsonLoadApp') .factory('LoadJsonFactory', function($http) { var jsonLoad = { fetch: function() { return $http.get('../../test.json').then(function(data) { return data; }); }, }; return jsonLoad; }) .controller('MainCtrl', function ($scope, LoadJsonFactory) { var a = []; LoadJsonFactory.fetch().then(function(items) { a = items; }); $scope.data = a; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div> <ul> <li ng-repeat="datum in data">{{datum.id}}</li> </ul> </div> 

這是Json文件的內容

[{"id": "0","Name": "Items 0", "Description": "Description 0"},
{"id": "1","Name": "Items 1", "Description": "Description 1"},
{"id": "2","Name": "Items 2", "Description": "Description 2"}]

控制器中的變量“ a”未使用由json文件生成的數組更新。 但是，如果我使用$ scope變量直接綁定數組，那么它將起作用。

LoadJsonFactory.fetch().then(function(items) {
            $scope.data = items;
        });

上面的代碼有效。

有沒有一種方法可以將其分配給控制器變量，然后將其綁定到范圍變量？

Answer 1

這個電話是異步的

LoadJsonFactory.fetch().then(function(items) {
    a = items;
});

在通話結束之前執行

$scope.data = a;

所以不，你不能這樣。 分配給$scope.data時， a將始終為空

但是，只要適合您就可以執行此操作，這與您的工作方式相同，只是更加清晰。

LoadJsonFactory.fetch().then(onFetch);


function onFetch(data) {
    $scope.data = data;
}

Answer 2

您可以將服務響應LoadJsonFactory分配給服務中的變量，而不是控制器中的變量，然后僅從任何控制器中調用它。

例如：

.factory('LoadJsonFactory', function($http) {

var jsonResponse = [];

return {
    fetch: function() {
       return $http.get('../../test.json').then(function(data) {
       jsonResponse = data;
     });
    },
    getResponseResult: function() {
      return jsonResponse;
    }
   }
 })

Answer 3

您的代碼的問題是LoadJsonFactory的$ http調用是異步的。 您的$scope.data = a在調用LoadJsonFactory之后立即運行。

我做了一個簡短的例子說明了這一點-打開控制台即可了解我的意思。 （我也對LoadJsonFactory進行了一些清理，以便更清楚地返回一個promise。）

https://plnkr.co/edit/Ns1iQdvhKT6DXrfjrOjm

在promise的成功函數內分配$ scope.data之所以可行，是因為此時已解決了promise，並且分配觸發了摘要，以更新雙向綁定。