如何在AngularJS中从TSV加载数据后才渲染一个指令

Question

如何在AngularJS中从TSV加载数据后才渲染一个指令

3

我想把d3.js和angularjs结合起来。我需要绘制一个链路图。数据从tsv文件中加载。我在渲染图形时遇到问题，错误是数据尚未加载而图形已经被渲染。我希望当数据加载到作用域变量中时，渲染图形，否则不渲染。请帮忙。以下是控制器的代码

phonecatControllers.controller('MainCtrl', ['$scope',
     function($scope) {
       d3.tsv("sample.tsv", function(error, data) {
       $scope.d3Data = data;
 });
}]);

以下是指令代码

directives.directive('d3Bar', [ function() {
return {
    restrict : 'E',
    scope : {
        data : '='
    },
    link : function(scope, element) {
        scope.$watch('data', function(newData, oldData) {
            drawLine(newData);
        }, true);
    }
}

}

HTML 是

<body ng-controller='MainCtrl'>
    <d3-bar data='d3Data'></d3-bar>

</body>

- hard coder

2个回答

6

在您的手表中添加一个if控制，检查您的数据项是否准备就绪

directives.directive('d3Bar', [function() {
    return {
        restrict : 'E',
        scope : {
            data : '='
        },
        link : function(scope, element) {
            scope.$watch('data', function(newData, oldData) {
                if(newData){
                    drawLine(newData);
                }
            }, true);
        }
    }
}])

- Poyraz Yilmaz

现在控制器中的行$scope.d3Data = data;不会触发任何事件到监视器函数。最初，监视器函数以未定义的oldData和newData两者都运行。 - hard coder

@ sarvesh，那么您的d3Data对象从未更改...请检查您的d3Data是否具有正确的值... - Poyraz Yilmaz

@wickY26- 我已经正确地调试了代码，首先将控制权传递给观察函数，旧数据和新数据均为未定义，然后转到控制器的 $scope.d3Data = data 行，在这一行之后，可以看到 data 变量具有一组值，但是如预期所料，观察函数并没有运行。 - hard coder

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rubi saini · Accepted Answer

使用ng-if指令，根据数据是否可用来解决这个问题。

HTML:

<body ng-controller='MainCtrl'>
  <div ng-if="d3Data">
    <d3-bar data='d3Data'></d3-bar>
  <div>
</body>

因此，只有当d3Data存在数据时，您的指令才会加载。