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

您的GeneralInit函数期望getUser返回一个promise，所以只需将其更改为：

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

Answer 2

您在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) {

      })
  }
}

AngularJS - 如何在JSON返回后更新$ scope上的变量

2 个答案: