如何在Angularjs中将值从服务传递给控制器
问题描述:
我正在使用angular dashboard framework制作窗口小部件,但我坚持如何将服务中生成的数据值传递给控制器?我想将var new_x的值传递给控制器 - 它在函数showInfo中生成的服务中。但是我加入时,得到下面的错误控制器如何在Angularjs中将值从服务传递给控制器
TypeError: Cannot read property 'showInfo' of undefined
at new <anonymous> (piechartCtrl.js:62) *(piechartCtrl.js:62 is data: $scope.chartService.showInfo())*
at invoke (angular.js:4523)
at Object.instantiate (angular.js:4531)
at angular.js:9197
at $q.all.then.msg (widget-content.js:115)
at processQueue (angular.js:14792)
at angular.js:14808
at Scope.$get.Scope.$eval (angular.js:16052)
at Scope.$get.Scope.$digest (angular.js:15870)
at Scope.$get.Scope.$apply (angular.js:16160)
我的代码是以防万一它是需要
“使用严格的”
angular.module('adf.widget.charts')
.service('chartService', function(){
return {
getUrl: function init(path) {
Tabletop.init({ key: path,
callback: showInfo,
simpleSheet: true })
}
}
function showInfo(data, tabletop) {
var new_x = data.map(function(el) {
return {
"name": el[Object.keys(el)[0]],
"y": +el[Object.keys(el)[1]]
};
});
console.log(JSON.stringify(new_x))
};
})
.controller('piechartCtrl', function (chartService, $scope) {
$scope.chartConfig = {
options: {
chart: {
type: 'pie'
}
},
series: [{
data: $scope.chartService.showInfo()
}],
title: {
text: 'Add Title here'
},
loading: false
}
});
chart.js之;
angular.module('adf.widget.charts', ['adf.provider', 'highcharts-ng'])
.config(function(dashboardProvider){
var widget = {
templateUrl: '{widgetsPath}/charts/src/view.html',
reload: true,
resolve: {
/* @ngInject */
urls: function(chartService, config){
if (config.path){
return chartService.getUrl(config.path);
}
}
},
edit: {
templateUrl: '{widgetsPath}/charts/src/edit.html'
}
};
dashboardProvider
.widget('piechart', angular.extend({
title: 'Custom Piechart',
description: 'Creates custom Piechart with Google Sheets',
controller: 'piechartCtrl'
}, widget));
});
答
您呼叫从$范围的服务,更换线路,它应该修复它是这样的:
series: [{
data: chartService.showInfo()
}],
控制器看起来就像这样:
.controller('piechartCtrl', function (chartService, $scope) {
$scope.chartConfig = {
options: {
chart: {
type: 'pie'
}
},
series: [{
data: chartService.showInfo()
}],
title: {
text: 'Add Title here'
},
loading: false
}
答
我已添加workable JSFiddle demo为您简化它。下面是对有什么的描述。
内为您服务,返回从控制器调用所需的方法:
angular.module('adf.widget.charts')
.service('chartService', function($q){
var chartService = {};
charService.showInfo = function(){
var new_x = data.map(function(el) {
return $q.resolve({
name: el[Object.keys(el)[0]],
y: el[Object.keys(el)[1]]
});
}
...
return chartService;
}
注意:您showInfo()内,确保你返回使用$q
,要做到这一点呼叫$q.resolve
并通过一个承诺你将数据返回给它。
控制器内:
.controller('piechartCtrl', function (chartService, $scope) {
chartService.showInfo()
.then(function(data){
//your returned data
});
}
另外,还要确保你做到以下几点:
控制器定义与服务定义分开和控制器模块指定依赖于服务模块,我的意思是
在一个单独的模块中定义服务:
angular.module("services", [])
.factory("myService", function(){.....});
和控制器在不同的模块中,并确定依赖项?
angular.module("controllers", ["services"])
.controller("myController", function(){....});
谢谢您的回答,但我仍然得到这个错误的ReferenceError:showInfo没有定义 – Imo
检查更新的答案,PLZ服务和控制器之间的分离,并在控制器中指定的服务的依赖性然后更新 – msoliman
检查更新再次回答这是关于我将数据从服务返回给控制器的方式的新更新。你必须将返回的数据包装在$ q.resolve中,以返回一个承诺..它将defintely工作..更在那里有一个在jsfiddle中的工作示例添加 – msoliman