AngularJs中使用Controller与Link中使用CharJs异步加载问题

Question

1.正在做一个后台管理页面，通过$http异步加载数据，数据加载完成后，显示统计数据，效果如下图：

加载完成后试图：

2.现在遇到一个问题：

$http请求写在Controller里，在异步加载完成以前给了图表一个假数据，等异步加载完以后去除加载动画把真实数据显示出来。但是异步加载完以后页面数据还是显示假数据，并没有更新。

3.Html代码：

<div id="homeBarData" ng-controller="chartJsCtrl as chart">
    <canvas barchart options="chart.barOptions" data="chart.barData" 
        height="70" responsive=true></canvas>
</div>

4.Controller代码：

var last_seven_days = [getDateStr(-7), getDateStr(-6), getDateStr(-5), getDateStr(-4), getDateStr(-3), getDateStr(-2), getDateStr(-1)];
var successNum = [10, 20, 30, 40, 50, 60, 70];
var failNum = [70, 60, 50, 40, 30, 20, 10];
this.barData = {
    labels: last_seven_days,
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: successNum
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(26,179,148,0.5)",
            strokeColor: "rgba(26,179,148,0.8)",
            highlightFill: "rgba(26,179,148,0.75)",
            highlightStroke: "rgba(26,179,148,1)",
            data: failNum
        }
    ]
};
$http({
    method: 'post',
    url: '/getDatas'
}).then(function (response) {
    $timeout(function () {
        successNum = response.data.firstData;
        failNum = response.data.secondData;
    })
});

5.Link代码：

var angles = angular.module("angles", []);

angles.chart = function (type) {
    return {
        restrict: "A",
        scope: {
            data: "=",
            options: "=",
            id: "@",
            width: "=",
            height: "=",
            resize: "=",
            chart: "@",
            segments: "@",
            responsive: "=",
            tooltip: "=",
            legend: "="
        },
        link: function ($scope, $elem) {
            var ctx = $elem[0].getContext("2d");
            var autosize = false;

            $scope.size = function () {
                if ($scope.width <= 0) {
                    $elem.width($elem.parent().width());
                    ctx.canvas.width = $elem.width();
                } else {
                    ctx.canvas.width = $scope.width || ctx.canvas.width;
                    autosize = true;
                }

                if ($scope.height <= 0) {
                    $elem.height($elem.parent().height());
                    ctx.canvas.height = ctx.canvas.width / 2;
                } else {
                    ctx.canvas.height = $scope.height || ctx.canvas.height;
                    autosize = true;
                }
            }

            $scope.$watch("data", function (newVal, oldVal) {
                if (chartCreated)
                    chartCreated.destroy();

                // if data not defined, exit
                if (!newVal) {
                    return;
                }
                if ($scope.chart) {
                    type = $scope.chart;
                }

                if (autosize) {
                    $scope.size();
                    chart = new Chart(ctx);
                };

                if ($scope.responsive || $scope.resize)
                    $scope.options.responsive = true;

                if ($scope.responsive !== undefined)
                    $scope.options.responsive = $scope.responsive;

                chartCreated = chart[type]($scope.data, $scope.options);
                chartCreated.update();
                if ($scope.legend)
                    angular.element($elem[0]).parent().after(chartCreated.generateLegend());
            }, true);

            $scope.$watch("tooltip", function (newVal, oldVal) {
                if (chartCreated)
                    chartCreated.draw();
                if (newVal === undefined || !chartCreated.segments)
                    return;
                if (!isFinite(newVal) || newVal >= chartCreated.segments.length || newVal < 0)
                    return;
                var activeSegment = chartCreated.segments[newVal];
                activeSegment.save();
                activeSegment.fillColor = activeSegment.highlightColor;
                chartCreated.showTooltip([activeSegment]);
                activeSegment.restore();
            }, true);

            $scope.size();
            var chart = new Chart(ctx);
            var chartCreated;
        }
    }
}
angles.directive("barchart", function () {
    return angles.chart("Bar");
});

Answer 1

经过几天的摸索 directive 中 link方法中 $scope.$watch 已经是监听数据变话的动作，在HTML页面中 data="chart.barData" 在controller中使用的this.barData。这时使用$timeout方法来更新barData对象时 barData对象已经不存在，需要将HTML中的chart.barData直接改为data="barData"，并且在controller中使用$timeout，$timeout方法中再使用$scope对对象进行数据更新。