繁体   English   中英

在 Angular-chart.js 上动态设置数据

[英]Dynamically set data on Angular-chart.js

老实说,我对 angularjs 有点陌生,所以这可能是我对angular而不是angular-charts 的基本理解的问题。

我有两个控制器( PieItemsCtrlPieCtrl ),我想通过使用工厂服务(称为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);
        }
    } 
)

PieCtrl :

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;
});

控制器不会注意到您工厂中的值何时发生变化。 要将您的 item-Array 包含在 Angular 摘要循环中,请告诉 Angular $watch该数组。

如果您不想公开数组,请创建一个 getter:

itemsService.get = function() { return items; }

然后您可以在控制器的 $watch 表达式中包含该 getter:

$scope.$watch(getItems, watcherFunction, true);
function getItems() {
    return pieItems.get();
}

getItems-Function 在摘要循环中被调用,如果值发生变化并且将 newData 作为参数,则触发 watcherFunction。 true作为第三个参数创建一个深度观察。

function watcherFunction(newData) {
     console.log(newData);
     // do sth if array was changed
}

对于更复杂的对象,您可以使用 $watchCollection。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM