如何仅在角度 js 中从 tsv 加载数据后才呈现指令答案

【问题标题】：How to render a directive only after data is loaded from tsv in angular js如何仅在角度 js 中从 tsv 加载数据后才呈现指令
【发布时间】：2014-08-25 14:20:36
【问题描述】：

我想集成 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>

【问题讨论】：

标签： javascript angularjs d3.js tsv

【解决方案1】：

使用ng-if 与您的数据是否可用来解决此问题。

HTML：

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

所以你的指令只有在d3Data 有任何数据时才会加载。

【讨论】：

如果您在数据上有一个空对象链接，这将失败，请参阅stackoverflow.com/questions/32586180/…

【解决方案2】：

在您的手表中添加一个 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);
        }
    }
}])

【讨论】：

现在行 $scope.d3Data = data;控制器不会触发任何事件到观察者功能。最初，观察者函数以未定义的 oldData 和 newData 运行。
@sarvesh 那么您的 d3Data 对象永远不会改变...请检查您的 d3Data 是否具有正确的值...
@wickY26- 我已经正确调试了代码，控制首先转到未定义旧数据和新数据的监视函数，然后转到控制器的$scope.d3Data = data 行，在其中我可以看到数据变量有一个此线路监视功能后的值数组未按预期运行