Angular 返回对象时出现 infdig 错误
Angular infdig Error When Returning Object
我是 Angular 的新手,在这种情况下,我必须将对象传递到 ng-repeat 中元素的属性中。如果我不使用 ajax 获取数据而只是 return 一个普通对象,那么当 returning 新对象时代码工作正常,但是,当我这样做时,我得到一个 infdig 错误。我的问题是什么是最好的方法来完成我在下面的代码中所做的事情并解决我的 infdig 错误。非常感谢。
HTML ng-repeat 中的元素:
<div ng-if="currentView.comparisons !== 'null'">
<div ng-repeat="comparison in currentView.comparisons track by $index" class="row x-margintop">
<div class="row x-margintop">
<div class="col-md-8">
<fusioncharts width="100%" height="400px" type="column2d" datasource="{{getComparisonChart(comparison)}}"></fusioncharts>
</div>
</div>
</div>
</div>
JS:
/*Ajax For Getting Comparisons Omitted For Brevity But Comparisons Will Have
The Following Properties*/
var newCompObj = {name: comparison.name, template : comparison.template, dataSource: comparison.dataSource, date: {startDate: null, endDate: null}};
$scope.currentView.comparisons.push(newCompObj);
$scope.getComparisonChart = function(chart){
//Callback and Other Chart Data Will Vary Based On The Chart Type
if(chart.dataSource === 'SvC'){
var data = [];
/* here I want to make a callback and return some data and have that data as part of the returned object. I know this code is wrong, but not sure how to do this */
$http({
url:'callbacks/chart_data/dogCallback.jsp',
method: 'GET',
params: {startDate: chart.startDate, endDate: chart.endDate}
}).success(function(data){
setData(data);
});
function setData(data){
return {
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"placevaluesInside": "1",
"rotatevalues": "1",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14",
"theme": "fint"
},
"data": data,
};
}
};
问题是我可以有很多 fusioncharts,所以我不会为每个 fusioncharts 提供 $scope.var。用户可以使用该图表类型创建任意数量的图表,并且该类型的每个图表都需要相同的对象,但将具有不同的数据。我愿意接受任何关于如何解决这个问题的想法。总之,我有一个元素需要一个对象作为它的数据源。图表的类型定义了我用 ng-repeat 重复的对象和对象的其他属性,定义了必须通过回调 returned 的数据的参数。我还尝试了对象内联的 Ajax 调用,但没有成功。
如果您需要更多信息,请告诉我。
终于回到这个问题了。不确定这是否会帮助其他人。我最终做的是使用带有空数据对象的对象,然后在 ng-repeat 完成后稍后设置数据对象。
if(startDate != null && endDate != null && (vsData != null && vsData.length > 0)){
if(comparison.dataSource === 'svcChart'){
$http({
url:'callbacks/chart_data/Sales_StoreVsCountry.jsp',
method: 'GET',
params: {store: comparison.store, country: vsData, startDate: startDate, endDate: endDate}
}).success(function(data){
var chartObj = $scope.svcChart;
chartObj.data = data;
FusionCharts(chartId).setJSONData(chartObj);
});
}
}
我是 Angular 的新手,在这种情况下,我必须将对象传递到 ng-repeat 中元素的属性中。如果我不使用 ajax 获取数据而只是 return 一个普通对象,那么当 returning 新对象时代码工作正常,但是,当我这样做时,我得到一个 infdig 错误。我的问题是什么是最好的方法来完成我在下面的代码中所做的事情并解决我的 infdig 错误。非常感谢。
HTML ng-repeat 中的元素:
<div ng-if="currentView.comparisons !== 'null'">
<div ng-repeat="comparison in currentView.comparisons track by $index" class="row x-margintop">
<div class="row x-margintop">
<div class="col-md-8">
<fusioncharts width="100%" height="400px" type="column2d" datasource="{{getComparisonChart(comparison)}}"></fusioncharts>
</div>
</div>
</div>
</div>
JS:
/*Ajax For Getting Comparisons Omitted For Brevity But Comparisons Will Have
The Following Properties*/
var newCompObj = {name: comparison.name, template : comparison.template, dataSource: comparison.dataSource, date: {startDate: null, endDate: null}};
$scope.currentView.comparisons.push(newCompObj);
$scope.getComparisonChart = function(chart){
//Callback and Other Chart Data Will Vary Based On The Chart Type
if(chart.dataSource === 'SvC'){
var data = [];
/* here I want to make a callback and return some data and have that data as part of the returned object. I know this code is wrong, but not sure how to do this */
$http({
url:'callbacks/chart_data/dogCallback.jsp',
method: 'GET',
params: {startDate: chart.startDate, endDate: chart.endDate}
}).success(function(data){
setData(data);
});
function setData(data){
return {
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"paletteColors": "#0075c2",
"bgColor": "#ffffff",
"borderAlpha": "20",
"canvasBorderAlpha": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"placevaluesInside": "1",
"rotatevalues": "1",
"valueFontColor": "#ffffff",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14",
"theme": "fint"
},
"data": data,
};
}
};
问题是我可以有很多 fusioncharts,所以我不会为每个 fusioncharts 提供 $scope.var。用户可以使用该图表类型创建任意数量的图表,并且该类型的每个图表都需要相同的对象,但将具有不同的数据。我愿意接受任何关于如何解决这个问题的想法。总之,我有一个元素需要一个对象作为它的数据源。图表的类型定义了我用 ng-repeat 重复的对象和对象的其他属性,定义了必须通过回调 returned 的数据的参数。我还尝试了对象内联的 Ajax 调用,但没有成功。
如果您需要更多信息,请告诉我。
终于回到这个问题了。不确定这是否会帮助其他人。我最终做的是使用带有空数据对象的对象,然后在 ng-repeat 完成后稍后设置数据对象。
if(startDate != null && endDate != null && (vsData != null && vsData.length > 0)){
if(comparison.dataSource === 'svcChart'){
$http({
url:'callbacks/chart_data/Sales_StoreVsCountry.jsp',
method: 'GET',
params: {store: comparison.store, country: vsData, startDate: startDate, endDate: endDate}
}).success(function(data){
var chartObj = $scope.svcChart;
chartObj.data = data;
FusionCharts(chartId).setJSONData(chartObj);
});
}
}