將服務注入指令AngularJS和數據綁定。

我創建了一個服務，該服務使用$ http獲取數據，並且此數據存儲在此服務的變量中，同時我創建了一個使用該服務創建帶選項的標記選擇的指令，這些選項在服務中獲得，但這是我的問題獲得的數據永遠不會與指令連接。將服務注入指令AngularJS和數據綁定。

服務和指導：

angular.module('myModule'[]) 
    .factory('myService', ['$http', function($http){ 
     var listOptions = []; 
     $http({ 
      method: 'GET', 
      url: 'urlToDataJson' 
      }).then(function(resp){ 
       listOptions = resp.data 
      }) 
     ; 
     return { 
      list: listOptions; 
     } 
    }] 
    .directive('myDirective', ['myService', function(myService){ 
     restrict: 'E', 
     template: '<select ng-options="item.id as item.name for item in list"></select>', 
     replace: true, 
     controller: ['$scope', function($scope) 
      $scope.list = MyService.list; 
     ] 
    }]) 
;

與Chrome的DevTool我可以看到數據後$ HTTP運行更新，但在選項中的數據未顯示。

上面的代碼是我需要做的一個例子。

來源

2016-02-14 rck6982

您的$http調用返回承諾對象。在函數中調用$http調用並返回promise對象，然後在您的指令中調用此函數並解析promise對象並獲取數據。

具體來說，

getData(){ 
    return $http({ 
     method: 'GET', 
     url: 'urlToDataJson' 
     }).then(function(resp){ 
      listOptions = resp.data 
    ); // this returns a promise 
}

然後在你的指導，解決像這樣的承諾：

MyService.getData().then(function(data){ 
    console.log(data); // <-- this is how you access the result of your $http call 
});

來源

2016-02-14 04:15:41 frishi

我會盡力做那，但爲什麼這樣工作？我知道有一個異步調用，但結果被分配給一個變量。你能解釋我一點嗎？ – rck6982

您不知道http調用何時完成。如果你沒有承諾這麼做，由於JavaScript的異步特性，listOptions將是未定義的。如果沒有承諾，您正嘗試在http調用有機會完成之前分配listOption的值。 – frishi

現在我有一個懷疑，當我在ng-repeat中使用這個指令時會發生什麼，會有多個請求嗎？或者當數據在服務器中更新時發生了什麼？謝謝！ – rck6982

你可以這樣做也，

return $q(function (resolve, reject) { 

    $http({ 
     method: 'GET', 
     url: 'urlToDataJson' 
     }).then(function(resp){ 
      $scope.responseDate = resp.data; 
      resolve(responseData); 
     }); 
});

來源

2016-02-14 07:07:41

將服務注入指令AngularJS和數據綁定。

回答

相關問題