为什么$scope和var变量在我的角控制器中未定义，因为成功似乎只是隐藏值

Question

我做了几个不同的$http调用，我想设置变量(var blah)或$scope设置为对象值并至少持续几行，以便它可以发送到第二个$http请求

我得到undefined，为什么以及如何修复/坚持变量或范围?

app.controller('detailController', function ($scope, $interval, $http, $routeParams, $window, sessionVariables, $httpParamSerializer) {
//$scope.xid = 1;  // this seems to persist  but NOT if i try update it in 1st $http.get
$http.get('/Umbraco/Api/ClientsApi/GetClient/' + clientId).
success(function (data, status, headers, config) {
    console.log(data); // correctly shows me object of data
    $scope.xid = data.Id;  // DOES NOT WORK OUTSIDE OF this $http.get
    console.log(data.Id); // yes shows data inside here
    //console.log(data.IsSampleData); // contains data 
    $scope.client = data;  // this is how is then use client object in view template
}).
error(function (data, status, headers, config) {
    // log error
});

这就是问题所在，$scope。xid表示未定义

console.log('before');
console.log($scope.xid);  
console.log('after');

其中第二个$http。get call我想把xid附加到它的末尾

$http.get('/Umbraco/Api/ActivityApi/GetActivity').
    success(function (data, status, headers, config) {
   $scope.activity = data;  // correctly gets data
 }).
 error(function (data, status, headers, config) {
   // log error
 });

更新:完整代码

app.controller('detailController', function ($scope, $interval, $http, $routeParams, $window, sessionVariables, $httpParamSerializer) {
    var clientId = $routeParams.id;
    //console.log(clientId);
    //$scope.xid = 1;
    $http.get('/Umbraco/Api/ClientsApi/GetClient/' + clientId).
    success(function (data, status, headers, config) {
        console.log(data);
        //console.log(data.Id);
        //console.log(data.IsSampleData);
        $scope.client = data;
    }).
    error(function (data, status, headers, config) {
        // log error
    });
    console.log('before');
    console.log(client.Id);
    console.log('after');
    $http.get('/Umbraco/Api/ActivityApi/GetActivity').
   success(function (data, status, headers, config) {
       //console.log(data);
       //console.log(data.IsSampleData);
       $scope.activity = data;
   }).
   error(function (data, status, headers, config) {
       // log error
   });

});

Answer 1

使用承诺和链接

var firstRequest = $http.get(url).then(function (result) {
  /* optional - do something with result, pass through to next .then() */
  return result;
});
var secondRequest = firstRequest.then(function (result) {
  return $http.get(otherUrl);
});
var thirdREquest = secondRequest.then(function () {
  /* and so on */
});

Answer 2

您正在设置$scope。$http.get()返回的承诺被解析后返回。

实际上console.log($scope.xid)在赋值之前执行!

---

如果你想使用第一个承诺的结果，你可以像这样链接承诺:

$http.get('/Umbraco/Api/ClientsApi/GetClient/' + clientId)
.then(function(response) {
  return $http.get('/Umbraco/Api/ActivityApi/GetActivity' + response.Id)
)
.then(function(response2) {
  // Proccess response2
});

Answer 3

try this:

app.controller('detailController', function ($scope, $interval, $http, $routeParams, $window, sessionVariables, $httpParamSerializer) {
  var clientId = $routeParams.id;
  //console.log(clientId);
  //$scope.xid = 1;
  $http.get('/Umbraco/Api/ClientsApi/GetClient/' + clientId).then(function (response) {
    console.log(response.data);
    //console.log(response.data.Id);
    //console.log(response.data.IsSampleData);
    $scope.client = response.data;
    // second HTTP call with chained client ID received from the first call
    $http.get('/Umbraco/Api/ActivityApi/GetActivity/' + response.data.Id).then(function (response2) {
      //console.log(response2.data);
      //console.log(response2.data.IsSampleData);
      $scope.activity = response2.data;
    }).catch(function (error) {
      // log error
    });
  }).catch(function (error) {
    // log error
  });
  // this code is outside of $http promise as it is executed before promise resolve
  // so, at this point $scope.client.Id is undefined
  //console.log('before');
  //console.log($scope.client.Id);
  //console.log('after');
});

Answer 4

这段代码似乎"工作"有什么理由我不应该这样做吗?

$http.get('/Umbraco/Api/ClientsApi/GetClient/' + clientId).
      success(function (data, status, headers, config) {
            $scope.client = data;
            $scope.getActivity(data);     // CALL HERE 
}).
error(function (data, status, headers, config) {
    // log error
});
$scope.getActivity = function(data) {
    $http.get('/Umbraco/Api/ActivityApi/GetActivity').
        success(function(data, status, headers, config) {
            $scope.activity = data;
        }).
        error(function(data, status, headers, config) {
            // log error
        });
};

Answer 5

根据官方文档

为$http使用then()

 $http.get('/Umbraco/Api/ActivityApi/GetActivity').then(
    function success(response) {
       console.log(response.data);
       console.log(response.data.Id);
       $scope.client  = response.data; 
    },
    function error(response) {
      console.log(response);
    }
 );

---

编辑!

Http是异步的，需要一些时间来完成。这意味着$http被调用，而答案不是等待。代码后立即运行!

console.log("before $http");
$http.get('/Umbraco/Api/ActivityApi/GetActivity').then(
    function success(response) {
       console.log("http success"); 
       $scope.client  = response.data; 
    },
    function error(response) {
      console.log("http error"); 
      console.log(response);
    }
 );
 // this will be logged before the success/error of http
 console.log("after $http");

如果你想在成功完成时做一些事情，为它创建一个函数并从success/error