卡住了：AngularJs使用http調用json的工廠

我很震驚，無法理解這裏的問題。我使用HTTP服務呼叫我的JSON文件廠（accountInfo.json）創建一個工廠：卡住了：AngularJs使用http調用json的工廠

appRoot.factory('accountInfo', ['$http', function($http) { 
    return $http.get('../../accountInfo.json') 
    .success(function(data) { 
     return data; 
    }) 
    .error(function(err) { 
     return err; 
    }); 
}]);

控制器（AccountsController.js）

appRoot.controller('AccountsController', ['$scope', 'accountInfo', function($scope, accountInfo){ 

    accountInfo.success(function(data) { 
     $scope.rows = data; 
    }); 


    $scope.totals = { 
     name: '', 
     marketValue: 0, 
     cash: 0, 
     legend: 'none' 
    }; 

    for (var i = 0; i < $scope.rows.length; i++) { 
     $scope.totals.marketValue += $scope.rows[i].marketValue; 
     $scope.totals.cash += $scope.rows[i].cash; 
    } 


    $scope.addAccount = function() { 
     $scope.rows.push({ 
      name: 'New Account', 
      marketValue: Math.random() * 100000, 
      cash: Math.random() * 400000, 
      legend: 'cyan' 
     }); 
    } 
}]);

我的JSON（accountInfo.json）

[{ 
    "name": "Brokerage Account 3", 
    "marketValue": 1999990, 
    "cash": 1995826, 
    "legend": "orange" 
}, 
{ 
    "name": "Account 3", 
    "marketValue": 1949990, 
    "cash": 1695856, 
    "legend": "darkorange" 
}, 
{ 
    "name": "Brokerage Account 1", 
    "marketValue": 1349990, 
    "cash": 1595866, 
    "legend": "red" 
}, 
{ 
    "name": "Brokerage Account 4", 
    "marketValue": 155990, 
    "cash": 160826, 
    "legend": "blue" 
}, 
{ 
    "name": "Brokerage Account 2", 
    "marketValue": 74560, 
    "cash": 19956, 
    "legend": "gray" 
}, 
{ 
    "name": "Account 4", 
    "marketValue": 55006, 
    "cash": 53006, 
    "legend": "salmon" 
}, 
{ 
    "name": "Account 13", 
    "marketValue": 37340, 
    "cash": 0, 
    "legend": "green" 
}, 
{ 
    "name": "Joint Account 1", 
    "marketValue": 28308, 
    "cash": 4167, 
    "legend": "darkblue" 
}, 
{ 
    "name": "Joint Account 2", 
    "marketValue": 10000, 
    "cash": 10000, 
    "legend": "teal" 
}]

我收到的錯誤是「$ scope.rows is undefined」控制器無法訪問$ scope.rows以外的s訪問功能。

謝謝:)

來源

2016-02-18 Taani

那麼，這是什麼問題？ –

你需要解決您的控制器中的承諾，而不是在您的工廠，只需返回承諾：

appRoot.factory('account', ['$http', function($http) { 
    return { 
     info: function() { 
      return $http.get('../../accountInfo.json'); 
     } 
    } 
}]);

然後在你的控制器做：

appRoot.controller('AccountsController', ['$scope', 'account', function($scope, account){ 

    account.info() 
     .success(function(data) { 
      $scope.rows = data; 
     }) 
     .error(function(err) { 
      return err; 
     }); 

}]);

僅供參考，success和error方法已過時：

的$ HTTP遺留承諾的方法成功和錯誤已被棄用。改爲使用標準然後方法。如果$ httpProvider.useLegacyPromiseExtensions設置爲false，那麼這些方法將拋出$ http/legacy錯誤。

參見：https://docs.angularjs.org/api/ng/service/$http

使用then方法：

account.info().then(
    function resolved (response) { 
     $scope.rows = response.data; 
    }, 
    function rejected (response) { 
     alert(response.status + ': ' + response.statusText); 
    } 
);

這裏的概念的工作示例：http://plnkr.co/edit/UtJDpvBKKYl4rBzgXYo4?p=preview

來源

2016-02-18 11:19:14 iH8

謝謝，我做了同樣的事情，但仍然面臨這個問題。我收到的錯誤是「$ scope.rows未定義」控制器無法訪問成功函數外部的$ scope.rows。。在控制器內部，我能夠訪問數據對象的成功功能。 – Taani

我已經改變了被拒絕的方法來拋出一個警報，你應該看到如果請求被拒絕，並在Plunker上添加一個工作示例來回答我的問題。希望有所幫助。 – iH8

謝謝soo。我在這裏很新，並試圖瞭解發生了什麼。我也向我的控制器添加了刷新功能，並且能夠在HTML視圖中訪問我的數據並刷新它。但我無法訪問控制器內的函數後面的$ scope.rows。因此無法訪問長度屬性。 Plunker路徑：http://plnkr.co/edit/aB6ZJB5QXn5jqULfGTga?p=preview File accountController.js line no。 24. 我相信這與我缺少的一些核心邏輯有關。 – Taani

你應該返回的獲取，當你調用它像這樣的數據功能：

appRoot.factory('accountInfo', ['$http', function($http) { 
    return { 
     fetchData: fetchData 
    }; 

    function fetchData() { 
     return $http.get('../../accountInfo.json'); 
    } 
}]);

然後在你的控制器，你可以這樣做：

accountInfo.fetchData() 
    .then(
     function(data) { 
      console.log(data); 
     }, 
     function(error) { 
      console.log(error); 
     } 
    );

來源

2016-02-18 11:18:38

謝謝，我做了同樣的事情，但仍然面臨這個問題。我收到的錯誤是「$ scope.rows未定義」控制器無法訪問成功函數外部的$ scope.rows。在控制器內部，我能夠訪問數據對象的成功功能。 – Taani

謝謝大家的幫助。我通過引導應用程序解決了我的問題。由於http調用沒有完成，我最初無法訪問我的數據。

angular.element(document).ready(function() { 
    angular.bootstrap(angular.element(document), ['app']); 
});

來源

2016-02-24 06:21:32 Taani

卡住了：AngularJs使用http調用json的工廠

回答

相關問題