删除 nvd3 角度图表答案

【问题标题】：Removing nvd3 angular charts删除 nvd3 角度图表
【发布时间】：2014-12-10 17:52:56
【问题描述】：

我有一个指令 - 基于绑定数据和元数据 - 显示折线图或条形图。我使用 nvd3 来显示这些图表，并且第一次显示效果很好。但是当元数据发生变化并且图表类型应该发生变化时，我会同时看到。

这是我的链接功能：

link: (scope: IReportChartScope, element: JQuery, attrs) => {
    currentElement = element;

    scope.$watch('diagramInfo', (newVal: IDiagramInformation, oldVal: IDiagramInformation, scp: IReportChartScope) => {
        if (innerElement) {
            d3.select('#' + scope.diagramId + ' svg').remove();
            innerElement.remove();
        }

        if (!newVal) {
            currentElement.html(loadingDataTemplate);
        } else {
            var request = <IPeriodDiagramDataRequest>diagramInfo.Request;

            if (request.Period.Id == DiagramAggregationPeriod.All) {
                currentElement.html(barChartTemplate);
            } else {
                currentElement.html(lineChartTemplate);
            }
            innerElement = $compile(currentElement.contents())(scope);
        }
    });
}

您可以看到，一开始我尝试删除指令的 innerElement，但不知何故它不起作用。这些是我的模板：

var loadingDataTemplate = '<h1>Loading...</h1>';
var lineChartTemplate = '<nvd3-line-chart id="{{diagramId}}" data="diagramInfo.Series" showxaxis="true" showyaxis="true" tooltips="true" interactive="true" ' +
    'showlegend="true" width="{{width}}" height="{{height}}" nodata="Es wurden keine Daten geladen." margin="{top: 30, right: 30, bottom:30, left: 90}">' +
    '<svg ng-style="{width: width + \'px\', height: height + \'px\'}"></svg></nvd3-line-chart>';
var barChartTemplate = '<nvd3-multi-bar-chart id="{{diagramId}}" data="diagramInfo.Series" showxaxis="true" showyaxis="true" tooltips="true" interactive="true" ' +
    'showlegend="true" width="{{width}}" height="{{height}}" nodata="Es wurden keine Daten geladen." margin="{top: 30, right: 30, bottom:30, left: 90}">' +
    '<svg ng-style="{width: width + \'px\', height: height + \'px\'}"></svg></nvd3-multi-bar-chart>';

我不想使用 ng-if 或 ng-hide，因为该指令将具有更多功能。有什么想法可以摆脱它吗？防止发生内存泄漏也很有趣。我找到了How to avoid memory leaks using angularjs-nvd3-directives 并将其用作我的灵感，但可能还不够。

【问题讨论】：

查看这个stackoverflow.com/questions/27309825/…，它可能对你有帮助。
谢谢，但不知何故不起作用，我也尝试了 append、replaceWith ......并且它们都在某个时候坏了。我最终得到了答案中描述的解决方案。

标签： angularjs typescript nvd3.js

【解决方案1】：

好吧，我猜 AngularJS 不是为这样使用而构建的，而是我定义了一个相当大的模板文件，其中包含一个 <div ng-include="chartTemplate"></div> 和许多 <script type="text/ng-template" id="xyzChart.html"/>...</script>。

在我的指令中，我现在只定义了我想在 chartTemplate 中使用的模板，一切都像一个魅力。虽然我不确定这是否会导致内存泄漏，但我们一次解决一个问题。

【讨论】：