AngularJS

Question

我是 angular 的新人，我正在从事一个依赖于服务和工厂的项目。我的问题是当我使用静态 jason 数组进行响应时，变量被正确填充并显示在视图中，但是当我将其更改为 ajax 请求并从 json 文件中获取它时, 响应成功但控制器变量未成功加载数据。

这是我的 angular 项目结构：

'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 return 一个承诺，所以只需将其更改为：

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); 语句中看不到任何数据，是因为在执行此语句时，promise 尚未真正解决（获取用户的请求尚未 return编）。尽管由于使用 $timeout 而调用了摘要循环，但 hmc.User 还没有数据。

尝试在您的 GeneralInit 方法中实际 return 请求之后调用摘要周期，您应该可以获取数据。

而且您可能还应该将 Get 方法更改为 return 一个承诺：

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 returns 之后更新 $scope 上的变量

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

javascript

angularjs-service