Question

我有以下D3指令组件：

pieChart - 基本饼图
barChart - 基本条形图

每个指令都是这样的：

(function() {
    'use strict';

    angular.module('secure').directive('pieChart', [
        'd3', function(d3) {
            return {
                restrict: 'A',
                replace: true,
                scope: {
                    data: "="
                },
                templateUrl: '/Angular/Shared/GraphChart/pieChart.html',
                link: function (scope, element, attrs) {
                    // setup the d3 chart

                    scope.render = function(data) {
                       // apply data to chart and transform
                    }

                    scope.$watch('data', function(data) {
                        // Watch for scope changes and push new data
                        scope.render(data);
                    });
                }
            }
        }
    ]);
})();

两者都在另一个名为collector的指令中使用，如下所示。可以有 N 个收藏家。正如您所看到的，每个收集器的所有收集器和图表数据都位于collectors指令范围内的collector数组中。

<div ng-repeat="collector in collectors">
    <div class="collector">
        <div class="bars">
           <div bar-chart data="collector.acceptor"></div>
        </div>
        <div pie-chart data="collector.denomSegments"></div>
    </div>
</div>

现在，我有一个套接字连接，将服务器（新收集器数组）的更新推送到collector指令，然后更新ng-repeat中的所有图表。

然而，在scope.collectors指令的范围内，collector数组更改的任何时候发生了什么，所有图表指令都被强制重写在ng-repeat中。因此，每个图表指令中的$ watch变得完全无用，因为它永远不会在整个link函数执行的情况下执行，当然，重绘整个图表而不是仅仅更新它。

我希望这是有道理的。我不确定是否有办法解决它。我唯一能想到的是使用collector指令上的collectors数组初始化初始页面加载时的所有图表，然后将每个图表组件$watch放在$rootScope变量上以进行更新到图表。这样我完全绕过父收集器指令重新绑定所有图表。但这似乎非常复杂，因为我必须确保正确的图表从$rootScope获得正确的更新。

还有其他建议吗？

使用数据更新嵌套的D3角度指令

0 个答案: