AngularJS-無法將數據從工廠傳遞到控制器
[英]Angularjs - cannot pass data from factory to controller
問題描述
我是新來的有角度的人，發現自己陷入困境。 我試圖將數據從工廠傳遞到控制器，無論我嘗試了什么，它都返回未定義。 有人可以幫忙嗎？ 最終，我將需要訪問控制器中的Time和Output變量以傳遞到圖表中。
碼：
WaveChart.factory('waveService', function($http) {
var getWaveDataFunction = function(beach){
$http.get(waveData[beach])
.success(function(data) {
console.log('yay it works');
return data;
var Time = [];
for (var i = 0; i < data.length; i++) {
Time.push(data[i].Time);
}
var Output = [];
for (var i = 0; i < data.length; i++) {
Output.push(data[i].Output);
}
//console.log(Time);
//console.log(Output);
});
}
return {
getWaveData: getWaveDataFunction
};
});
WaveChart.controller('chartCtrl', function ($scope, waveService, $state) {
var currentBeach = $state.current.title.toLowerCase();
$scope.waveData = waveService.getWaveData(currentBeach);
console.log($scope.waveData);
嘗試根據下面的示例2中提供的重構代碼進行更新，但是$ scope.waveData現在返回空數組。 我提供了更新的（以及更完整的）代碼：
Chart.js：
var WaveChart = angular.module('WaveChart', ["highcharts-ng"]);
var waveData = {
waimea: "assets/wave-waimea.json",
pauwela: "assets/wave-pauwela.json",
hanalei: "assets/wave-hanalei.json"
}
WaveChart.factory('waveService', function($http) {
var getWaveDataFunction = function(beach){
return $http.get(waveData[beach])
.then(function(data) {
var Time = [];
for (var i = 0; i < data.length; i++) {
Time.push(data[i].Time);
}
var Output = [];
for (var i = 0; i < data.length; i++) {
Output.push(data[i].Output);
}
return { time: Time, output: Output };
});
}
return {
getWaveData: getWaveDataFunction
};
});
WaveChart.controller('chartCtrl', function ($scope, waveService, $state) {
var currentBeach = $state.current.title.toLowerCase();
waveService.getWaveData(currentBeach)
.then(function(waveData){
$scope.waveData = waveData;
console.log($scope.waveData);
$scope.chartConfig = {
title: {
text: 'Wave Height Observations'
},
subtitle: {
text: 'according to the PacIOOS'
},
options: {
chart: {
type: 'spline'
},
plotOptions: {
spline: {
lineWidth: 2,
states: {
hover: {
lineWidth: 3
}
},
marker: {
enabled: false
}
},
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
enabled: true
},
lineWidth: 1,
states: {
hover: {
lineWidth: 2
}
},
threshold: null
}
}
},
xAxis: {
name: "Time",
categories: waveData.time
},
yAxis: {
title: {
text: 'Wave Height'
},
labels: {
formatter: function () {
return this.value;
}
}
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
series: [{
name: 'Wave Height',
marker: {
symbol: 'square'
},
data: waveData.output
}]
}
});
});
wave-waimea.json
[
{"Time":"00:09", "Output":4.40},
{"Time":"00:39", "Output":4.63},
{"Time":"01:09", "Output":4.72},
{"Time":"01:39", "Output":4.69},
{"Time":"02:09", "Output":4.20},
{"Time":"02:39", "Output":4.92},
{"Time":"03:09", "Output":4.89},
{"Time":"03:39", "Output":4.89},
{"Time":"04:09", "Output":5.18},
{"Time":"04:39", "Output":5.18},
{"Time":"05:09", "Output":5.41},
{"Time":"05:39", "Output":5.71},
{"Time":"06:09", "Output":5.91},
{"Time":"06:39", "Output":5.68},
{"Time":"07:09", "Output":6.33},
{"Time":"07:39", "Output":6.53},
{"Time":"08:09", "Output":6.23},
{"Time":"08:39", "Output":6.63},
{"Time":"09:09", "Output":7.58},
{"Time":"09:39", "Output":6.43},
{"Time":"10:09", "Output":6.86},
{"Time":"10:39", "Output":6.89},
{"Time":"11:09", "Output":7.25},
{"Time":"11:39", "Output":7.35},
{"Time":"12:09", "Output":7.12},
{"Time":"12:39", "Output":7.15},
{"Time":"13:09", "Output":6.73},
{"Time":"13:39", "Output":6.89},
{"Time":"14:09", "Output":6.63},
{"Time":"14:39", "Output":7.48}
]
1 個解決方案
解決方案1
1 2016-11-02 04:10:44
這是諾言的教科書用例。 有關在angularjs中使用promise的詳細信息，請參見angular文檔 。
在這種情況下，您有兩個選擇，我建議第二個選擇，因為在HTTP響應通過后您確實要進行一些后期處理。 （我包括了第一個，主要是為了說明將異步$http響應返回給控制器的最基本方法）
1-返回$http承諾本身，並在控制器中處理響應：
WaveChart.factory('waveService', function($http) {
var getWaveDataFunction = function(beach){
return $http.get(waveData[beach]);
};
return {
getWaveData: getWaveDataFunction
};
});
WaveChart.controller('chartCtrl', function ($scope, waveService, $state) {
waveService.getWaveData(currentBeach)
.success(function(data) {
console.log('yay it works');
var Time = [];
for (var i = 0; i < data.length; i++) {
Time.push(data[i].Time);
}
var Output = [];
for (var i = 0; i < data.length; i++) {
Output.push(data[i].Output);
}
//console.log(Time);
//console.log(Output);
$scope.waveData = {
time: Time,
output: Output
};
});
});
2-創建一個新的$http.success並從$http.success回調中解決它
WaveChart.factory('waveService', function($http) {
var getWaveDataFunction = function(beach){
// return then $http.get promise
return $http.get(waveData[beach])
.then(function(data) {
console.log('yay it works');
var Time = [];
for (var i = 0; i < data.length; i++) {
Time.push(data[i].Time);
}
var Output = [];
for (var i = 0; i < data.length; i++) {
Output.push(data[i].Output);
}
//console.log(Time);
//console.log(Output);
// return value here is what the $http.get promise will resolve
return { time: Time, output: Output };
});
}
return {
getWaveData: getWaveDataFunction
};
});
WaveChart.controller('chartCtrl', function ($scope, waveService, $state) {
var currentBeach = $state.current.title.toLowerCase();
// use .then callback to wait for the promise to be resolved
waveService.getWaveData(currentBeach)
.then(function(waveData){
$scope.waveData = waveData;
console.log($scope.waveData);
});
編輯：剛注意到您可以通過將兩個data循環組合成一個循環來優化結果處理：
var Time = [];
var Output = [];
for (var i = 0; i < data.length; i++) {
Time.push(data[i].Time);
Output.push(data[i].Output);
}
AngularJS：在沒有工廠，服務或廣播的情況下將數據從控制器傳遞到控制器？
[英]AngularJS : pass data from controller to controller without factory, service or broadcast?
使用工廠將數據從一個控制器傳遞到AngularJS中的另一個控制器
[英]Using a factory to pass data from one controller to another controller in AngularJS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.