使用角度控制器中的承諾數據

Question

我的控制器內部我打電話給我的服務，其中包含我想在DrinkLibrary中使用的一組數據。 DrinkLibrary有一個getDrinks - 從我的數據庫獲取數據的方法。

app.controller('analysisController',function(Drink,DrinkLibrary,$scope){ 
    console.log('connected'); 

    var drinkSet = function(){ 
     DrinkLibrary.getDrinks().success(function(data){ 
      var caffeineData = data; 
     }); 
    }; 
    drinkSet(); 
}); 

當我打電話success()我得到我想要的caffeineData裏面的數據。當我撥打drinkSet()時，我收到了我的瀏覽器控制檯內需要的數據。在控制器中。但是，我僅限於caffeineData存在於drinkSet-方法中。

有沒有更好的方法來設置這個，以便我可以在圖表中使用這些數據？

Answer 1

您想在哪裏購買data？你可以做很多事情。例如：

app.controller('analysisController',function(Drink,DrinkLibrary,$rootScope,$scope){ 
    console.log('connected'); 

    var drinkSet = function(){ 
     DrinkLibrary.getDrinks().success(function(data){ 
      var caffeineData = data; // local only to this function 
      $scope.caffeineData = data; // local to this controller 
      $rootScope.caffeineData = data; // local to the application 
     }); 
    }; 
    drinkSet(); 
}); 

參考文獻：

https://docs.angularjs.org/guide/scope

https://docs.angularjs.org/api/ng/service/$rootScope

Answer 2

由於caffeineData是一個局部變量，所以它不會在該視圖中可用。您必須將數據設置爲$scope，然後才能在視圖中訪問它。

app.controller('analysisController',function(Drink,DrinkLibrary,$scope){ 
    console.log('connected'); 

    var drinkSet = function(){ 
     DrinkLibrary.getDrinks().success(function(data){ 
      $scope.caffeineData = data; 
     }); 
    }; 
    drinkSet(); 
}); 

視圖內。根據caffeineData的對象類型，您可以在視圖中添加邏輯。

<div>{{caffeineData}}</div> 

您可以瞭解更多有關的角度範圍在這裏https://docs.angularjs.org/guide/scope

演示http://plnkr.co/edit/s8mWpCTV6bvxmR3hOLOM?p=preview

Answer 3

您可以將數據綁定到控制器$scope和在HTML使用它

app.controller('analysisController',function(Drink,DrinkLibrary,$scope){ 
    console.log('connected'); 

    var loadDrinks = function(){ 
    DrinkLibrary.getDrinks().success(function(data){ 
     $scope.caffeineData = data; 
    }); 
    }; 
    loadDrinks(); 
}); 

HTML

<ul ng-controller="analysisController"> 
    <li ng-repeat="drink in caffeineData"> 
     <label ng-bind="drink.name"></label> 
    </li> 
</ul> 

Answer 4

如果您需要使用該函數外的響應數據，請在定義drinkSet函數之前先嚐試實例化一個變量。假設你的數據被設定於caffeineData是一個數組，像這樣：

app.controller('analysisController',function(Drink,DrinkLibrary,$scope){ 
    console.log('connected'); 

    var caffeineData = []; // could also set via $scope.caffeineData 
    var drinkSet = function(){ 
     DrinkLibrary.getDrinks().success(function(data){ 
      caffeineData = data; 
     }); 
    }; 
    drinkSet(); 
}); 

通過實例它的功能外，它不會被保密的函數（JS有function level scope for variables）。這裏的好處是，如果在yoru caffeineData var中設置了在DOM中生成的任何內容，則可以在填充之前使其在空數組上正確構建。

我們可以在這裏進一步改進控制器，假設您的成功回調中除了設置數據之外沒有任何其他事情發生;看看：

app.controller('analysisController',function(Drink,DrinkLibrary,$scope){ 
    console.log('connected'); 

    var caffeineData = []; // could also set via $scope.caffeineData 
    DrinkLibrary.getDrinks().success(function(data){ 
     caffeineData = data; 
    }); 
}); 

至於你想在圖表中使用這些數據，你可以定義成功回調裏面圖表發起的呼叫，只調用您的數據成功設定圖表建築功能。

---

[編輯] 每我的意見，這裏是一個更新的版本，我建議你試試。你會注意到我把console.log 裏面的成功/錯誤回調，以確保你的轉儲到控制檯是在諾言解決之後，無論哪種方式。我已經包含了註釋和其他回調參數，如$http.get example from the AngularJS docs中所示，其中評論專門討論承諾的異步性質。

app.controller('analysisController',function(Drink,DrinkLibrary,$scope){ 
    console.log('connected'); 

    $scope.caffeineData = []; // could also set via $scope.caffeineData 
    DrinkLibrary.getDrinks() 
     .success(function(data, status, headers, config){ 
      // this callback will be called asynchronously 
      // when the response is available 
      $scope.caffeineData = data; 
      console.log("Response code of the GET was: "+status); 
      console.log("Data received: "+data); 
     }).error(function(data, status, headers, config) { 
     // called asynchronously if an error occurs 
     // or server returns response with an error status. 
     $scope.caffeineData = null; //no data :'-(
     console.log("data: " + data); 
     console.log("status: " + status); 
     //console.log("headers: " + headers); 
     //console.log("config: " + JSON.parse(config)); 
     }); 
}); 

[/編輯]