[英]Passing Data from AngularJS Service to AngularJS Controller
Can someone help me with below problem, Here I wanted to pass the data from getJiraInfo(Service)
to LineController(Controller)
. 有人可以帮我解决以下问题吗?在这里,我想将数据从
getJiraInfo(Service)
传递给LineController(Controller)
。
In the Line Controller
, currently, I have hard coded the values as 目前,在
Line Controller
,我已经将值硬编码为
data: [65, 59]
But I wanted to pass these values from the getJiraInfo Service to data field dynamically as data : [toDoCount,inProgressCount]
但是我想将这些值从getJiraInfo服务作为
data : [toDoCount,inProgressCount]
动态传递给data字段data : [toDoCount,inProgressCount]
Can you please help me with this by referring Plunker? 您可以通过介绍Plunker来帮助我吗?
In your service you are not returning any value from the .then
function, so calling the service function won't yield anything, you need to add something like 在您的服务中,您不会从
.then
函数返回任何值,因此调用service函数不会产生任何结果,您需要添加以下内容
return $q.when([selectedCount, inProgressCount]);
it returns a resolved promise with your relevant data. 它会返回已解决的承诺以及您的相关数据。
Then, you just need to call the promise and pass the data inside the .then
body 然后,您只需要调用promise并在
.then
正文中传递数据
controller: 控制器:
getJiraInfo.getInfo().then(function(data) {
// chartData will be setup when the response will arrive to your controller
$scope.chartData = {
labels: ["In Progress", "To Do"],
datasets: [{
label: "Weekly Report",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: data,
spanGaps: false,
}]
};
})
As you know $http
returns original Promise. 如您所知,
$http
返回原始的Promise。 In your example you resolved it in service and did nothing with results. 在您的示例中,您在服务中解决了该问题,但未对结果进行任何处理。 Since we talk about async call, you can create new Promise by using
$q
and resolve it on controller side. 由于我们讨论的是异步调用,因此您可以使用
$q
创建新的Promise并在控制器端对其进行解析。 The main point is to return deferred.promise;
重点是返回
deferred.promise;
- object that contains resolve
and reject
callbacks. -包含
resolve
和reject
回调的对象。
Your service looks like factory ae: 您的服务看起来像是工厂ae:
return {
getInfo: function() {/**/}
}
Change it to service
syntax ae: 将其更改为
service
语法ae:
this.getInfo = function() {/**/};
or use factory
ae 或使用
factory
AE
app.factory('getJiraInfo', function($http, $filter,$q) {/**/};
You already defined chart options so left only update the data: 您已经定义了图表选项,因此仅更新数据:
getJiraInfo.getInfo().then(function(results) {
$scope.chartData.datasets.data = results;
});
var app = angular.module('myApp', ['tc.chartjs']);
app.service('JiraInfo', ['$http', '$filter','$q',function($http, $filter,$q) {
this.getInfo = function() {
var deferred = $q.defer();
$http({
method: 'GET',
url: 'defect.json'
}).then(function(response) {
selectedCount = $filter('filter')(response.data.issues, function(
inputs) {
if (inputs.fields.status.name == 'To Do') return inputs;
});
inProgressCount = $filter('filter')(response.data.issues, function(
inputs) {
if (inputs.fields.status.name == 'IN PROGRESS') return inputs;
});
// console.log(inProgressCount.length,selectedCount.length);
var data = {
val:[inProgressCount.length,selectedCount.length]
};
deferred.resolve(data);
}, function (error) {
deferred.reject(error);
});
return deferred.promise;
};
}]);
app.controller('LineController', function($scope, JiraInfo) {
$scope.chartData = {
labels: ["In Progress", "To Do"],
datasets: [{
label: "Weekly Report",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [0,0],
spanGaps: false,
}]
};
$scope.chartOptions = {
responsive: true,
maintainAspectRatio: false,
};
function run(){
JiraInfo.getInfo().then(function(resp) {
console.log(resp.val);
$scope.chartData.datasets[0].data = resp.val;
});
}
$scope.onChartClick = function(event) {
console.log('LineController', 'onChartClick', event);
}
run();
});
Try this : 尝试这个 :
Call Service method which is returning selectedCount and inProgessCount. 调用Service方法,该方法返回selectedCount和inProgessCount。
app.controller('LineController', function($scope, getJiraInfo) { getJiraInfo.getInfo().then(function(response) { $scope.chartData = { labels: ["In Progress", "To Do"], datasets: [{ label: "Weekly Report", fill: false, lineTension: 0.1, backgroundColor: "rgba(75,192,192,0.4)", borderColor: "rgba(75,192,192,1)", pointHoverBorderWidth: 2, pointRadius: 1, pointHitRadius: 10, data: [response.selectedCount , response.inProgressCount],//data passed here spanGaps: false, }] }; })
}); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.