3

我设置了一个指令来处理使用 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：无法读取 parseData 处未定义的属性‘长度’”。

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

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

谢谢！

4

2 回答 2

0

我想说 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
    });
}
于 2014-06-16T06:54:23.503 回答
0

以及我自己的问题的答案：

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

这是跳闸范围。$注意：

var data = scope[attrs.ngModel];

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

于 2013-07-05T03:40:50.240 回答