Question

我有一个指令 - 基于绑定数据和元数据 - 显示折线图或条形图。我使用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并将其用于我的灵感，但可能还不够。

Answer 1

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

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

删除nvd3角度图表

1 个答案: