在我的控制器内部,我正在调用我的服务,其中包含我希望在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
。
有没有更好的方法来设置它,以便我可以在图表中使用这些数据?
答案 0 :(得分: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();
});
参考文献:
答案 1 :(得分:1)
由于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
答案 2 :(得分:0)
您可以将数据绑定到控制器$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>
答案 3 :(得分:0)
如果您需要在该函数之外使用响应数据,请在定义您的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中显示的注释和其他回调参数,其中的注释专门讨论了promises的异步性质。
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));
});
});
[/编辑]