javascript - Angular $scope 首先设置值而不是服务，在第二个函数调用后一切正常

Question

我正在尝试使用我的服务 viewShare 将数据设置到 Controller ，当我查看控制台时，我可以看到 Controller 的 console.log 首先出现并且未定义，但服务首先启动，奇怪的是在此 console.log 之后，我可以看到来自 viewShare 的 console.log 已填充。如果我再次尝试 Controller 中的功能，那么我的 Controller 已正确填充。

我的 Controller :

$scope.getLine = function(search){
 arcTouchAPI.getLine(search);
 console.log(viewShare.getDetails);

 $scope.details = viewShare.getDetails.details;  //angular ignores my viewShare call and go to console.log($scope.details) than it start the viewShare service
 $scope.$apply;
 console.log($scope.details);

};

我的服务API:

var _getLine = function(search){


var encoded = $base64.encode("xxxx:xxxx");
$http({
  url: "https://api.appglu.com/v1/queries/findRoutesByStopName/run",
  headers : {
    "X-AppGlu-Environment":"xxxx",
    "Authorization": "Basic "+encoded,
    "Content-Type" : "application/json; charset=utf-8"
  },
  method: 'POST',
  data: { 
    "params":{
      "stopName": "%"+search+"%"
    }
  }
}).then(function(response){ 
    viewShare.add(response.data.rows);
   // console.log($rootScope.details + "details");
   console.log(response.data.rows);


});



}
 return {
 getLine : _getLine
}

});

我在 View 之间共享数据的服务:

angular.module('myApp').factory('viewShare', function viewShare() { 
var messages={};


var _add = function(message){
  messages.details = "";
  messages.details=message;
  console.log(messages.details);
  return messages.details;
};


var  _getDetails = function(){

  return messages;

 };

 return{
    getDetails: messages,
    add: _add

}

});

Answer 1

$http 调用是非阻塞的，这意味着您的 console.log 在您的请求发送到 getLine 后立即执行(如编码所示)，但是这不会等待 $http 调用完成，因此立即没有数据。您应该从 _getLine 返回 $http Promise，并等待 Promise 解析，然后再尝试 getDetails。此外，不需要显式调用 $scope.$apply。

var _getLine = function(search){
var encoded = $base64.encode("xxxx:xxxx");
  return $http({ // add return statement here to return a promise
    url: "https://api.appglu.com/v1/queries/findRoutesByStopName/run",
    headers : {
      "X-AppGlu-Environment":"xxxx",
      "Authorization": "Basic "+encoded,
      "Content-Type" : "application/json; charset=utf-8"
    },
    method: 'POST',
    data: { 
      "params":{
        "stopName": "%"+search+"%"
      }
    }
  }).then(function(response){ 
    viewShare.add(response.data.rows);
    // console.log($rootScope.details + "details");
    console.log(response.data.rows);
  });
}

将 Controller 更改为:

$scope.getLine = function(search){
 arcTouchAPI.getLine(search).then(function(){
      console.log(viewShare.getDetails);
      $scope.details = viewShare.getDetails.details; 
 });

};