javascript - morris.js 作为 Angular js 指令数据 'undefined'

Question

我在我的 Angular JS 应用程序中使用 morris.js 图表。我将其转换为这样的指令:
barchart.js:

angular.module('app_name').directive('barchart', function () {
    return {
        // required to make it work as an element
        restrict: 'AEC',
        template: '<div class=chart_div></div>',
        replace: true,
        // observe and manipulate the DOM
        link: function ($scope, element, attrs) {

            var data = $scope[attrs.data],
                xkey = $scope[attrs.xkey],
                ykeys = $scope[attrs.ykeys],
                labels = $scope[attrs.labels];

            Morris.Bar({
                element: element,
                data: data,
                xkey: xkey,
                ykeys: ykeys,
                labels: labels,
                hideHover: true,
                grid: false
            });

        }

    };

});

然后，在我的 page.html 中，我使用这样的指令:

<section class="graphs" ng-controller="ChartController">
<div class="graphs_box">
    <div class="graphs_box_title">My Orders</div>
    <div class="chart_bg">
        <div barchart xkey="xkey" ykeys="ykeys" labels="labels" data="MyData"></div>
    </div>
</div>

问题是，当我将数据添加到“ChartController”中的图表时像这样:

        getChartData = function () {
        $scope.xkey = 'X';
        $scope.ykeys = ['Y'];
        $scope.labels = ['Total Tasks', 'Out of Budget Tasks'];
        $scope.PlannedChart = [
          { range: 'A', total_tasks: 20 },
          { range: 'B', total_tasks: 35 },
          { range: 'C', total_tasks: 100 },
          { range: 'D', total_tasks: 50 }
        ];
    };

它有效。但是当我尝试像这样从数据库(json 格式)添加数据时:

    getChartData = function () {
        ChartsService.getCharts("orders").success(function (data) {
            $scope.xkey = 'X';
            $scope.ykeys = 'Y';
            $scope.labels = ['Total Tasks', 'Out of Budget Tasks'];
            $scope.OrdersChart = data.Val_Chart;

        });
    };

这不起作用。数据是从数据库中获取的 - 好的(我在调试时看到了它)。另外，我注意到，当我调试时，代码首先转到带有“未定义”数据的 barchart.js，然后才转到获取数据的服务。

Answer 1

我猜这是因为 getCharts("orders") 在这里异步工作。您需要在 Morris.Bar() 返回的对象上调用 setData(data)。请参阅the Morris.js Documenation

我修复了这个问题，将指令的所有属性放在一个对象中并将其用作链接函数:

link: function ($scope, element, attrs) {


            var params = $scope[attrs.params];
            angular.extend(params, {element: element});

            var graph = Morris.Line(params);


            var refresh = function(new_params) {
                graph.setData(new_params.data);
            }

            $scope.$watchCollection(attrs.params, refresh);

        }

$scope.$watchCollection(attrs.params,refresh); 观察作用域上的 params 对象，您只需在异步加载完成后为该对象提供一个新的数据数组即可。这会更新它。

这是指令元素:

<barchart params="sentin_chart"></barchart> 

这是 Controller 中的对象:

$scope.sentin_chart = {};
$scope.sentin_chart.data = [];
$scope.sentin_chart.xkey = 'day';
$scope.sentin_chart.ykeys = ['sent_in'];
$scope.sentin_chart.labels = ['Sent in Stories'];

正如我所说，您只需将新的数据数组放入此对象即可更新图表$scope.sentin_chart.data = %NEWDATAARRAY%

我希望这对您有意义。