[英]Dynamically set data on Angular-chart.js
To be honest I am a bit new to angularjs, so this may be problem with my fundamental understanding of angular , rather than angular-charts .老实说,我对 angularjs 有点陌生,所以这可能是我对angular而不是angular-charts 的基本理解的问题。
I have two controllers ( PieItemsCtrl and PieCtrl ) and I would like to communicate between them by using a factory service (called pieItems )我有两个控制器( PieItemsCtrl和PieCtrl ),我想通过使用工厂服务(称为pieItems )在它们之间进行通信
On the one hand the pieItems works as designed in the PieItemsCtrl.一方面,pieItems 按照 PieItemsCtrl 中的设计工作。
ie: IE:
$scope.slices = pieItems.list();
Whenever something changes in the pieItems service (ie another element is added), then the HTML is automatically updated via a repeater :每当 pieItems 服务发生变化(即添加另一个元素)时,HTML 就会通过转发器自动更新:
<div ng-repeat="(key, val) in slices">
However in the PieCtrl I have this line, and i would expect the pie chart to update automatically :但是在 PieCtrl 我有这条线,我希望饼图自动更新:
$scope.labels = pieItems.labelsItems();
$scope.data = pieItems.data();
It seems to set these data values upon loading/initialisation of the PieCtrl and that's it.似乎在加载/初始化 PieCtrl 时设置这些数据值,就是这样。 Whenever the pieItems data changes these scope values are not updated.
每当 pieItems 数据更改时,这些范围值都不会更新。
The source of the two controller and factory object are below.两个控制器和工厂对象的来源如下。 And I also made an unworkable fiddle , incase that helps
我还做了一个不可行的小提琴,以防万一有帮助
PieItemsCtrl : PieItemsCtrl :
app.controller('PieItemsCtrl', function($scope, $http, $rootScope, pieItems) {
$scope.slices = pieItems.list();
$scope.buttonClick = function($event) {
pieItems.add(
{
Name: $scope.newSliceName,
Percent: $scope.newSlicePercent,
Color: $scope.newSliceColor
}
)
}
$scope.deleteClick = function(item, $event) {
pieItems.delete(item);
}
}
)
PieCtrl : PieCtrl :
app.controller("PieCtrl", function ($scope, $timeout, pieItems) {
$scope.labels = pieItems.labelsItems();
$scope.data = pieItems.data();
});
pieItems :馅饼项目:
app.factory('pieItems', function() {
var items = [];
var itemsService = {};
itemsService.add = function(item) {
items.push(item);
};
itemsService.delete = function(item) {
for (i = 0; i < items.length; i++) {
if (items[i].Name === item.Name) {
items.splice(i, 1);
}
}
};
itemsService.list = function() {
return items;
};
itemsService.labelsItems = function() {
var a = ['x', 'y'];
for (i = 0; i < items.length; i++) {
a.push(items[i].Name);
}
return a;
};
itemsService.data = function() {
var a = [50,50];
for (i = 0; i < items.length; i++) {
a.push(items[i].Percent);
}
return a;
};
return itemsService;
});
The controller doesn't notice when the value in your factory changes.控制器不会注意到您工厂中的值何时发生变化。 To include your item-Array in an Angular digest-cycle, tell Angular to $watch that Array.
要将您的 item-Array 包含在 Angular 摘要循环中,请告诉 Angular $watch该数组。
If you don't want to expose the Array, create a getter:如果您不想公开数组,请创建一个 getter:
itemsService.get = function() { return items; }
Then you can include that getter in your $watch expression in your controller:然后您可以在控制器的 $watch 表达式中包含该 getter:
$scope.$watch(getItems, watcherFunction, true);
function getItems() {
return pieItems.get();
}
The getItems-Function gets called on digest cycle and fires the watcherFunction if the value changed and has the newData as argument. getItems-Function 在摘要循环中被调用,如果值发生变化并且将 newData 作为参数,则触发 watcherFunction。
true
as 3rd argument creates a deep watch. true
作为第三个参数创建一个深度观察。
function watcherFunction(newData) {
console.log(newData);
// do sth if array was changed
}
For more complex objets, you can use a $watchCollection.对于更复杂的对象,您可以使用 $watchCollection。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.