Question

我是angularJS的新手。对不起，如果我不清楚这个问题。

这是问题所在。

我有一个大小为20KB的JSON文件。当我尝试使用'factory'方法加载此文件时，我得到null值。

var app = angular.module('moonApp', []);

app.factory('MainSource', ['$http', function($http){
    var data={source:null};
    $http.get('/datafile.json',function(output){
      data.source=output;
      console.log(data.source); // it works
    });
    return data;
}]);

app.controller('appCtrl',['$scope','MainSource',function($scope,MainSource){
  console.log(MainSource.source); // Not works - getting Null value
}]);

对于上面的代码，我在控制台中获取NULL值。但如果我在$ http success方法中尝试它，它会呈现json文件内容。

请帮帮我。提前谢谢。

Answer 1

我正在使用$ resource来读取json文件。以下代码可以为您加载json文件。

var app = angular.module('moonApp', ['ngResource']);

app.module('moonApp')
.service('MainSource', function($resource) {
    return $resource('/datafile.json', {}, {
        query: {
            method: 'GET',
            isArray: true
        }
    });
})

现在，在控制器中注入并使用该服务

app.controller('appCtrl',['$scope','MainSource',function($scope,MainSource){
   MainSource.query(function (data) {
    $scope.source = data;
    console.log($scope.source); // hopefully you'll see the JSON data here
   });       
}]);

Answer 2

您可以在MainSource工厂定义一项功能，并通过then()电话返回您可以在控制器中解析的承诺。请试一试。

app.factory('MainSource', ['$http', function ($http) {

    function getSource() {
        return $http.get('/datafile.json', function () {
        });
    }

    return {
        'getSource': getSource
    }
}]);

app.controller('appCtrl', ['$scope', 'MainSource', function ($scope, MainSource) {

    MainSource.getSource().then(function (response) {
        console.log(response);
    });
}]);

Answer 3

试试这样：

console.log(MainSource.data.source);

AngularJS急于加载json文件

3 个答案: