AngularJS 无法从服务加载数据
AngularJS unable to Load data from Service
我无法从调用 api 的服务向控制器发送数据。我使用 http://embed.plnkr.co/jEQMch/ 作为示例应用程序并对其进行了修改以创建子弹图。
我的控制器是这样的:
var app = angular.module('plunker', ['nvd3', 'gridster', 'plunker.services']);
app.controller('MainCtrl', function($scope, $timeout, DataService) {
$scope.gridsterOptions = {
margins: [20, 20],
columns: 4,
mobileModeEnabled: false,
draggable: {
handle: 'h3'
},
resizable: {
enabled: true,
handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'],
},
};
$scope.options = {
chart: {
type: 'bulletChart',
transitionDuration: 500
}
};
$scope.data = {}
$scope.dashboard = {
widgets: [
{
col: 0,
row: 0,
sizeY: 3,
sizeX: 2,
name:"Test",
chart:
{
options: DataService.bulletChart.options(),
data: DataService.bulletChart.data(),
api: {}
}
},
]
};
// We want to hide the charts until the grid will be created and all widths and heights will be defined.
// So that use `visible` property in config attribute
$scope.config = {
visible: false
};
$timeout(function(){
$scope.config.visible = true;
}, 200);
});
我的数据服务如下所示:
angular.module('plunker.services', [])
.factory('DataService', function($http, $q) {
return{
bulletChart: {
options: bulletChartOptions,
data: bulletChartData
}
};
/**
* Data & Options Generators
*/
function bulletChartOptions() {
return {
chart: {
type: 'bulletChart',
margin : {
top: 40,
right: 20,
bottom: 0,
left: 130
},
showValues: true,
duration: 500,
}
}
}
function bulletChartDataTest() {
return {
"title": "Test",
"subtitle": "Completed",
"ranges": [200,400,709],
"measures": [694],
"markers": [300]
}
}
function bulletChartData(){
$http.get('http://myapi/data').then(function(response) {
console.log('response-dataFound',response.data);
//$bulletChart.data = angular.copy(response.data);
return response.dat
;})
}
});
在我的服务中,如果我使用函数“bulletChartDataTest
”,我会得到正确的图表:
当我切换到 bulletChartData
时,我看不到图表。
我认为 data: bulletChartData
没有正常工作。我的 bulletChartData
方法有什么问题?任何指针?
这是因为在 bulletChartDataTest
中数据已经可用,而您只是返回它。但是在 bulletChartData
中,您正在进行实际的服务调用,这实际上是 returns 一个承诺。因此,当您在加载时定义数据和配置选项时,由于在 bulletChartData 的情况下对数据服务的调用是异步的,因此它会失败并且即使在成功返回数据后也不会刷新。因此,您可以做的是在加载时调用服务并将数据放在控制器的范围变量中,然后将该变量附加到视图中 nvd3
指令的 data
属性。因此,一旦响应来自服务数据,这种方式就会自动为图表更新并在 DOM 中创建。
<nvd3 options="widget.chart.options" data="chartData" api="widget.chart.api"
config="config" events="events"></nvd3>
并在控制器中进行服务调用以获取图表数据,例如:
DataService.bulletChart.servicedata().then(function(data){
$scope.chartData = data;
});
这里的servicedata是进行真正服务调用的工厂函数。
您的工作 plunker 版本:https://plnkr.co/edit/WG6PJO?p=preview
我无法从调用 api 的服务向控制器发送数据。我使用 http://embed.plnkr.co/jEQMch/ 作为示例应用程序并对其进行了修改以创建子弹图。
我的控制器是这样的:
var app = angular.module('plunker', ['nvd3', 'gridster', 'plunker.services']);
app.controller('MainCtrl', function($scope, $timeout, DataService) {
$scope.gridsterOptions = {
margins: [20, 20],
columns: 4,
mobileModeEnabled: false,
draggable: {
handle: 'h3'
},
resizable: {
enabled: true,
handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'],
},
};
$scope.options = {
chart: {
type: 'bulletChart',
transitionDuration: 500
}
};
$scope.data = {}
$scope.dashboard = {
widgets: [
{
col: 0,
row: 0,
sizeY: 3,
sizeX: 2,
name:"Test",
chart:
{
options: DataService.bulletChart.options(),
data: DataService.bulletChart.data(),
api: {}
}
},
]
};
// We want to hide the charts until the grid will be created and all widths and heights will be defined.
// So that use `visible` property in config attribute
$scope.config = {
visible: false
};
$timeout(function(){
$scope.config.visible = true;
}, 200);
});
我的数据服务如下所示:
angular.module('plunker.services', [])
.factory('DataService', function($http, $q) {
return{
bulletChart: {
options: bulletChartOptions,
data: bulletChartData
}
};
/**
* Data & Options Generators
*/
function bulletChartOptions() {
return {
chart: {
type: 'bulletChart',
margin : {
top: 40,
right: 20,
bottom: 0,
left: 130
},
showValues: true,
duration: 500,
}
}
}
function bulletChartDataTest() {
return {
"title": "Test",
"subtitle": "Completed",
"ranges": [200,400,709],
"measures": [694],
"markers": [300]
}
}
function bulletChartData(){
$http.get('http://myapi/data').then(function(response) {
console.log('response-dataFound',response.data);
//$bulletChart.data = angular.copy(response.data);
return response.dat
;})
}
});
在我的服务中,如果我使用函数“bulletChartDataTest
”,我会得到正确的图表:
当我切换到 bulletChartData
时,我看不到图表。
我认为 data: bulletChartData
没有正常工作。我的 bulletChartData
方法有什么问题?任何指针?
这是因为在 bulletChartDataTest
中数据已经可用,而您只是返回它。但是在 bulletChartData
中,您正在进行实际的服务调用,这实际上是 returns 一个承诺。因此,当您在加载时定义数据和配置选项时,由于在 bulletChartData 的情况下对数据服务的调用是异步的,因此它会失败并且即使在成功返回数据后也不会刷新。因此,您可以做的是在加载时调用服务并将数据放在控制器的范围变量中,然后将该变量附加到视图中 nvd3
指令的 data
属性。因此,一旦响应来自服务数据,这种方式就会自动为图表更新并在 DOM 中创建。
<nvd3 options="widget.chart.options" data="chartData" api="widget.chart.api"
config="config" events="events"></nvd3>
并在控制器中进行服务调用以获取图表数据,例如:
DataService.bulletChart.servicedata().then(function(data){
$scope.chartData = data;
});
这里的servicedata是进行真正服务调用的工厂函数。
您的工作 plunker 版本:https://plnkr.co/edit/WG6PJO?p=preview