javascript - AngularJS - how to update variable on $scope after JSON returns -


i'm new in angular , i'm working on project depends on service , factories. problem when i'm using static jason array response, variables filled correctly , shown in view, when change ajax request , json file, response comes successful controller variables not loaded data.

this angular project structure:

'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']; 

and here config:

    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();             }}         });     } 

here service:

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() {    }  } 

my controller , initialize item:

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); } 

the reason why don't see data in console.log(hmc.user); statement because time statement executes, promise not resolved (the request fetching users has not yet returned). though digest cycle invoked result of using $timeout, hmc.user not have data yet.

try invoking digest cycle after requests return in generalinit method, , should have data available.

and should change method return promise:

function usersrv($http) {   var user = {};    var service = {     getuser:   };    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) {        })   } } 

Comments