javascript - AngularJS 对象在 Controller 方法中丢失值

Question

我是一名初级开发人员，所以我可能遗漏了一些明显的东西，但我觉得有点疯狂。我有一个简单的 Angular 网络应用程序。我正在尝试加载与主机数组相对应的环境名称的哈希字典。 {development: ["dev.8090", "host.dev.9009"]} 然后使用该字典查找我当前所在的主机。我应该能够将 location.host 变量传递给 getEnv 方法，并找到相关键来告诉我我所处的环境。

字典已加载，但当我尝试在 getEnv 方法内部访问它时，它恢复为一个空对象。请注意，不是未定义的，而是空的。这是我的代码:

var app = angular.module('app', ['ngResource', 'ui.bootstrap', 'ui.router']);

app.config(['$httpProvider', function ($httpProvider) {

    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];

}]);

function AppController($scope, $http) {
    window.MY_SCOPE = $scope;

    $scope.env = "Local";
    $scope.dict = {};

    $scope.loadDict = function() {
      $http.get('api/call/').
        success(function(data){
          for (env in data.environment) {
          // data.environment = array of objects
          // [
          // {hosts: ["host1", "host2"], name: "string1"},
          // {hosts: ["host1", "host2"], name: "string2"}
          // ]
            var key = data.environment[env].name;
            $scope.dict[key] = data.environment[env].hosts;
          }
          console.log($scope.envDict)
          // in the console:
          // Object {string1: Array[2], string2: Array[2]}
        }).error(function(data){
            console.error(data);
        })
    };

    $scope.getEnv = function(host) {
      for (key in $scope.dict) {
        // never gets this far because $scope.dict is now = {}
        for (value in $scope.dict[key]) {
          if ($scope.dict[key][value] === host) {
            $scope.env = key;
          }
        }
      }
    };

    $scope.loadDict();
    $scope.getEnv("host1");
}

我可以使用 MY_SCOPE 变量手动调用这些方法中的每一个，并从控制台获得我想要的结果。如果我对字典进行硬编码，它就可以工作。如果我从代码中除 $scope.getEnv 函数内部以外的任何地方 console.log $scope.dict，我会得到我期望的结果。只要涉及到$scope.getEnv，$scope.dict = {}。

我试过将键硬编码到字典中。我试过在代码中移动定义。我试过将 loadDict 方法导出到工厂中。都无济于事。想法？

Answer 1

$scope.loadDict 中的 $http.get 调用是异步的。在加载字典之前调用 getEnv。一旦数据返回，您需要调用 getEnv。

让 loadDict 返回 $http.get调用，这会给你一个 promise 。然后，您可以将该 promise 链接到成功回调。

您还应该将 $http 调用放在某种服务中，以“Angular ”方式执行此操作:)

试试这个:

$scope.loadDict = function() {
      return $http.get('api/call/').
        success(function(data){
          for (env in data.environment) {
         var key = data.environment[env].name;
            $scope.dict[key] = data.environment[env].hosts;
          }
          console.log($scope.envDict)
          // in the console:
          // Object {string1: Array[2], string2: Array[2]}
        }).error(function(data){
            console.error(data);
        })
    };

$scope.loadDict().then(function(result){
     $scope.getEnv("host1");
}