2015-02-23 115 views
1

我想將JSON文件加載到工廠,然後返回它的值。

下面的代碼:

angular.module('getGuilds', []) 
    .factory('getGuilds', getGuilds); 

getGuilds.$inject = ['$http']; 

function getGuilds($http){ 
    var obj = {content:null}; 

    $http.get('guild/guilds.json').success(function(data) { 
     obj.content = data; 
    }); 

    return obj; 
} 

的問題是,它只返回值爲NULL值的對象,因此它似乎$ http.get不會改變obj的價值。內容

這之後,我做了一個小測試:

$http.get('guild/guilds.json').success(function(data) { 
     obj.content = data; 
    }); 

    console.log(obj) 
    return obj; 
} 

它還給這個對象insted的JSON的的數組:{內容:空}

然後我把console.log放在$ http.get請求中。

$http.get('guild/guilds.json').success(function(data) { 
    obj.content = data; 
    console.log(obj) 
}); 

猜猜看是什麼,它註銷了JSON文件。有人會幫助我嗎?

回答

3

$ http.get異步執行get操作。源代碼中的成功塊之後出現的代碼在成功塊內的代碼之前運行。所以它的行爲和預期一樣:在第一次嘗試時,你記錄未完成請求的結果。

2

這是因爲$ http.get異步執行get操作。所以在你分配值的時候,它還沒有可用。您需要返回OBJ你成功函數內部改變你這樣的代碼應該使其工作:

// dataservice factory 
angular 
.module('getGuilds', []) 
.factory('dataservice', dataservice); 

dataservice.$inject = ['$http']; 

function dataservice($http) { 
    return { 
     getGuilds: getGuilds 
    }; 

    function getGuilds() { 
     return $http.get('guild/guilds.json') 
     .then(getGuildsComplete) 
     .catch(getGuildsFailed); 

     function getGuildsComplete(response) { 
     return response.data; 
     } 

     function getGuildsFailed(error) { 
     console.log('XHR Failed for getGuilds.' + error.data); 
     } 
    } 
} 

在您的控制器,那麼你會調用DataService在:

dataservice.getGuilds() 
    .then(function(data) { 
    vm.guilds = data; 
    return vm.guilds; 
    }); 

顯然控制器需要更多的代碼實際工作。但是這應該給你足夠的信息來解決你的問題。