老实说,我对 angularjs 有点陌生,所以这可能是我对angular的基本理解而不是angular-charts 的问题。
我有两个控制器(PieItemsCtrl和PieCtrl),我想通过使用工厂服务(称为pieItems)在它们之间进行通信
一方面,pieItems 按照 PieItemsCtrl 中的设计工作。
IE:
$scope.slices = pieItems.list();
每当 pieItems 服务发生变化(即添加了另一个元素)时,HTML 就会通过中继器自动更新:
<div ng-repeat="(key, val) in slices">
但是在 PieCtrl 我有这条线,我希望饼图会自动更新:
$scope.labels = pieItems.labelsItems();
$scope.data = pieItems.data();
似乎是在加载/初始化 PieCtrl 时设置这些数据值,仅此而已。每当 pieItems 数据更改时,这些范围值都不会更新。
两个控制器和工厂对象的来源如下。而且我还做了一个不可行的小提琴,以防有帮助
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);
}
}
)
饼图控件:
app.controller("PieCtrl", function ($scope, $timeout, pieItems) {
$scope.labels = pieItems.labelsItems();
$scope.data = pieItems.data();
});
馅饼项目:
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;
});