AngularJS - 如何在JSON返回後更新$範圍上的變量

Question

我是角新手，我正在開發一個依賴於服務和工廠的項目。我的問題是當我使用靜態jason數組作爲響應時，變量被正確填充並顯示在視圖中，但是當我將其更改爲ajax請求並從json文件獲取時，響應成功，但控制器變量未成功加載數據。

這是我的角度項目結構：

'use strict'; 
angular 
    .module('mytestapp',['ngRoute']) 
    .config(config) 
    .controller('HomeCtrl', HomeCtrl) 
    .controller('AboutCtrl', AboutCtrl) 
    .factory('GeneralInit', GeneralInit) 
    .service('UserSrv', UserSrv); 
    GeneralInit.$inject = ['UserSrv','$q']; 
    HomeCtrl.$inject = ['GeneralInit','$timeout','UserSrv']; 

，這裏是我的配置：

function config($routeProvider) { 
     $routeProvider 
     .when('/', { 
      templateUrl: 'template/home.html', 
      controller: 'HomeCtrl', 
      controllerAs: 'hmc', 
      resolve: { 
       GeneralInit: function(GeneralInit){ 
       return GeneralInit(); 
       }} 
     }) 
     .when('/about', { 
      templateUrl: 'template/about.html', 
      controller: 'AboutCtrl', 
      controllerAs: 'abc', 
      resolve: { 
      GeneralInit: function(GeneralInit){ 
       return GeneralInit(); 
      }} 
     }); 
    } 

這裏是我的服務：

function UserSrv($http) { 
    var User={}; 
    var service = { 
    getUser: Get, 
    updateUser: Update, 
    logoutUser: Logout 
    }; 
    return service; 

    function Get() { 
    //return {"FirstName":"StaticName","LastName":'StaticLastName'} 
    $http.get('/user.json') 
     .success(function(data, status, headers, config) { 
      User = data; 
      console.log(User); 
      return User; 
     }) 
     .error(function(data, status, headers, config) { 

     }) 
    } 

    function Update() { 

    } 

    function Logout() { 

    } 

} 

我的控制器和初始化項目：

function GeneralInit(UserSrv,$q) 
{ 
    return function() { 
    var User = UserSrv.getUser(); //{'FirstName':'FstName','LastName':'LstName'};// 
    var Base='browser'; 

    return $q.all([User, Base]).then(function(results){ 
     return { 
     User: results[0], 
     Base: results[1] 
     }; 
    }); 
    } 
} 

function HomeCtrl(GeneralInit,$timeout) 
{ 
    var hmc= this; 
    $timeout(function(){ 
     hmc.User=GeneralInit.User; 
     console.log(hmc.User); 
    } 
    ,0); 
} 

Answer 1

之所以看不到在console.log(hmc.User);語句中的任何數據，因爲當本聲明執行，承諾實際上沒有解決（請求提取用戶尚未返回）。雖然由於使用$timeout而導致摘要循環被調用，但hmc.User還沒有數據。

嘗試調用摘要循環後請求實際返回您的GeneralInit方法中，並且您應該有可用的數據。

而且還你應該改變你的Get方法返回一個承諾：

function UserSrv($http) { 
    var User = {}; 

    var service = { 
    getUser: Get 
    }; 

    return service; 

    function Get() { 
    return $http.get('/user.json') 
     .success(function(data, status, headers, config) { 
     User = data; 
     console.log(User); 
     return User; 
     }) 
     .error(function(data, status, headers, config) { 

     }) 
    } 
} 

Answer 2

你GeneralInit功能期待的getUser返回一個承諾，所以才改成這樣：

function UserSrv($http, $q) { 
    var User={}; 
    var service = { 
    getUser: Get, 
    updateUser: Update, 
    logoutUser: Logout 
    }; 
    return service; 

    function Get() { 
    var deferred = $q.defer(); 
    //return {"FirstName":"StaticName","LastName":'StaticLastName'} 
    $http.get('/user.json') 
     .success(function(data, status, headers, config) { 
      User = data; 
      console.log(User); 
      deferred.resolve(user); 
      return User; 
     }) 
     .error(function(data, status, headers, config) { 

     }); 
     return deferred.promise; 
    } 
}