承諾的意外行爲

Question

我在使用工廠/服務時遇到了麻煩。我爲我所有的AJAX調用創建了一個AjaxRequests工廠。我的工廠代碼是

.factory('AjaxRequests', ['$http', function ($http) { 
       return { 
        getCampaignsData: function() { 
         var campaigns 
         return $http.get(url).then(function (response) { 
          campaigns = response.data; 
          return campaigns; 
         }); 

        } 
       } 
      }]) 

我已經創建了另一項服務，我正在注入此工廠。我的服務代碼

.service('CampaignsService', ['$rootScope', 'AjaxRequests', function ($rootScope, AjaxRequests) { 
    this.init = function() { 
    this.camps; 
    AjaxRequests.getCampaignsData().then(function (response) { 
     this.camps = response.campaigns; 
     console.log(this.camps); // It is showing data 
    }) 
    console.log(this.camps); // But it is not working :(
    }; 
    this.init(); 

}]) 

而且在我的控制器

.controller('AdvanceSettingsController', ['$scope', 'CampaignsService', function ($scope, CampaignsService) { 
       $scope.CampaignsService = CampaignsService; 
      } 
     ]) 

我讀過這個article學習承諾，但它不是在這裏工作。我可以直接在控制器中實現它，它一直工作正常。但它認爲控制器很厚是一個糟糕的編碼標準。但是當我使用服務和工廠時，我卡住了。 我的問題是爲什麼我沒有在我的整個服務中使用ajax數據？我需要在我的視圖模板中以及在我的整個休息腳本中使用CampaignsService.camps，但每次獲得undefined。這裏發生了什麼？我之前曾問過同樣的問題，但未能取得任何成功。 有人請幫我理解承諾，爲什麼我得到這種類型的錯誤，如果我工作相同？這種類型的問題已被問到before，但它在控制器中工作。可能是我卡住了，因爲我在服務中使用它。

非常感謝提前。

Answer 1

這不是一個錯誤或一些棘手的功能。就像其他AJAX實現一樣，您只能訪問AngularJS的$httpsuccess方法中的響應數據。這是因爲異步JavaScript和XML的本質異步。

你有什麼工作。

.controller('AdvanceSettingsController', ['$scope', 'AjaxRequests', function ($scope, AjaxRequests) { 
     $scope.camps = []; 
     AjaxRequests.getCampaignsData().then(function(data) { 
      $scope.camps = data; 
     }); 
    } 
]) 

，然後綁定camps：

<div ng-repeat="camp in camps>{{camp.name}}</div> 

是什麼在你執行壞是不是在服務將相關的東西，你寫的一切大AjaxRequests服務。你應該有一個CampaignsService有一個getData方法並注入你的控制器。

這是爲什麼這個工作？由於$http會爲您執行$scope.$apply，這會在之後觸發摘要循環並加載數據（then）並更新HTML。所以在then回調ng-repeat運行[]和後它再次運行，但從響應的數據，因爲您設置$scope.camps = data;。

原因<div ng-repeat="camp in CampaignsService.camps>{{camp.name}}</div>不起作用是因爲function variable scoping。

this參考裏面你的then回調是不一樣的this引用它之外。

這將工作，並使用共同var self = this伎倆：

var self = this; 
this.camps = []; 
this.init = function() { 
    AjaxRequests.getCampaignsData().then(function (response) { 
     // here "this" is not the one from outside. 
     // "self" on the other hand is! 
     self.camps = response.campaigns; 
    }); 
};