Question

我已经设置了一个指令来处理使用AngularJS加载jQuery Flot图表：

var Dashboard = angular.module('StatsDashboard', []);

Dashboard.directive('chart', function() {
    return {
        restrict: 'E',
        template: '<div></div>',
        replace: true,
        link: function(scope, elem, attrs) {
            var chart = null;
            var data = scope[attrs.ngModel];
            var options = {}

            $.plot(elem, data, options);
            elem.show();
            }
        };
});

该指令从控制器加载：

function ChartCtrl($scope, $http)
{
    $http.get('controllers/weekly_overview_charts.php').success(function(data) {
        $scope.reg_vs_act = data;
        });
}

我得到一个“TypeError：无法读取undefined的属性'length' at parseData“。

肯定这是由于http函数的异步性质。

我的问题是，如何在指令尝试加载flot图表之前确保返回数据？

谢谢！

Answer 1

回答我自己的问题：

scope.$watch(attrs.ngModel, function(v){
    if(v)
    {
        chart = $.plot(elem, v, options);
        elem.show();
    }
});

这是绊倒的范围。$ watch up：

var data = scope[attrs.ngModel];

在这种情况下，应该只是attrs.ngModel。

Answer 2

我会说Erik的答案解决了这个问题，只是想补充说明显示的错误可能是$scope.reg_vs_act未定义。所以 - 要解决错误并支持在数据可用之前启动图表，您可以使用：

function ChartCtrl($scope, $http)
{
    $scope.reg_vs_act = []; //Init to array with length 0
    $http.get('controllers/weekly_overview_charts.php').success(function(data) {
        angular.copy(data, $scope.reg_vs_act); //Assignment would also work with a watch, but you would loose the reference to the original array
    });
}

AngularJS + jQuery Flot +使用来自控制器的http.get加载数据

2 个答案: