promise 返回的操作变量 AngularJS

Question

所以，我被困在这里很可能是因为我对 promise 对象的理解有限。

我从工厂获取数据的函数是

    $scope.getLogoFromService = function() {
    console.log('getLogoFromService called');
    var promise = 
        logoService.getLogo();
    promise.then(
       function(payload) { 
           console.log(payload.data.home_header.logo.file_path);
           $scope.logoPath = payload.data.home_header.logo.file_path;
       },
       function(errorPayload) {
           $log.error('failure loading logo', errorPayload);
       });
  };

如果我执行 {{logoPath}}，并且当我在函数内部 console.log 时，变量在视图上是可访问的，但在另一个函数中是不可访问的。

   $scope.UpdateLogo = function ()
        {
            console.log('UpdateLogo called');
            console.log($scope.logoPath);
        }

returns未定义。

我的服务代码，以备不时之需查看

App.factory('logoService', function($http) {
    return {
      getLogo: function() {
         return $http.get('cms/general');
      }
    }
  });

Answer 1

看来您是在 http 调用返回之前调用 UpdateLogo，我建议您这样处理：

$scope.getLogoFromService = function() {
  console.log('getLogoFromService called');
  var promise = logoService.getLogo();

  promise.then(
    function(payload) { 
      console.log(payload.data.home_header.logo.file_path);
      $scope.logoPath = payload.data.home_header.logo.file_path; // For use in the view.
      return $scope.logoPath; // Return the logopath to the next function in the chain.
    },
    function(errorPayload) {
      $log.error('failure loading logo', errorPayload);
    }
  );

  return promise;
};

$scope.UpdateLogo = function() {
  console.log('UpdateLogo called');
  $scope.getLogoFromService().then(function(logoPath) {
    console.log('getLogoFromService resolved!');
    console.log(logoPath);
  });
}

由于 logoPath 已分配给范围，从技术上讲，您不必担心将其传递到承诺链中，但这是最佳实践，所以我首先建议这样做，或者这也可以:

$scope.getLogoFromService = function() {
  console.log('getLogoFromService called');
  var promise = logoService.getLogo();

  promise.then(
    function(payload) { 
      console.log(payload.data.home_header.logo.file_path);
      $scope.logoPath = payload.data.home_header.logo.file_path; // For use in the view.
    },
    function(errorPayload) {
      $log.error('failure loading logo', errorPayload);
    }
  );

  return promise;
};

$scope.UpdateLogo = function() {
  console.log('UpdateLogo called');
  $scope.getLogoFromService().then(function() {
    console.log('getLogoFromService resolved!');
    console.log($scope.logoPath);
  });
}

在这种情况下，我们只是将承诺用作 "the data is available now" 通知，但我们实际上并未传递数据，因为它已分配给 $scope 并且两个函数都可以访问

整个事情也可以压缩成一个更简单的函数，但我保留了您的原始结构。

promise 返回的操作变量 AngularJS

Manipulating variable returned that is returned by promise AngularJS

javascript

promise

angularjs

angularjs-scope

angular-promise