状态更改后指令不在页面上呈现，但在直接加载后答案

【问题标题】：Directive not rendering on page after state change but is after direct load状态更改后指令不在页面上呈现，但在直接加载后
【发布时间】：2018-06-06 23:08:28
【问题描述】：

我有一个自定义指令，它接收数据，通过 nvD3.js 生成 SVG 图像（图形），然后将生成的 SVG 输出到页面。

我的问题是，如果直接加载状态，那么一切都很好，图像显示也很好，但是如果我转换到状态（例如，主菜单到图形页面），那么指令不会将图形放在页面上。

我之前遇到过这个问题，但我当时使用的修复程序现在不起作用：Directive in Angular not rendering on $state.go but is on initial load

指令设置：

return {
    restrict: "E",
    template: '<svg></svg>',
    link: function (scope, elem, attrs) {
        attrs.$observe('chartData', function (chartData) {
            var data = JSON.parse(chartData);
            if (data.graph_type === 'line') {
                lineChart(data);
            } else if (data.graph_type === 'pnb') {
                pnbChart(data);
            }
        })
    }
}

函数lineChart设置数据并通过nvD3运行以生成图表。如下，大部分样式都被去掉了。

function lineChart(chartData) {
    d3.select('svg > *').remove();
    nv.addGraph(function () {
        var chart = nv.models.lineChart()
            .margin({left: 40})
            .useInteractiveGuideline(true)
            .showYAxis(true)
            .showXAxis(true)
            .showLegend(false)
            .pointSize(5)
            .pointShape('diamond')
            .duration(100)
            .margin({left: 50})
            .interpolate("linear");

        ... a bunch of styling code

        if (reference.length) {
            d3.select('svg')
                .datum([
                    {
                        values: line_data,
                        key: 'Latest Data',
                        color: '#006f66',
                        size: '5'
                    },
                    {
                        values: reference,
                        key: 'Target',
                        color: '#fec232'
                    }
                ]).call(chart);
        } else {
            d3.select('svg')
                .datum([
                    {
                        values: line_data,
                        key: 'Latest Data',
                        color: '#006f66'
                    }
                ]).call(chart);
        }

        nv.utils.windowResize(chart.update());
    });
}

我因此在页面上调用它，其中 gdata 是一个包含要放入图表的原始数据的对象：

<nvd3-chart chart-data="gdata" class="svgContainer"></nvd3-chart>

页面上有一些控件可以动态更新gdata。这样做确实会更改发送到指令的数据，并且会更新如果图像已经显示。如果未显示，则 gdata 的值会发生变化，但图像仍不会显示。

到页面的转换是通过 ui-sref 完成的，但是使用普通的 href 进行测试，并且显示图表的页面的 url 不会显示图表。只有通过地址栏直接加载页面才有效。正确加载后从图像页面过渡，然后返回到它，它将继续工作。

这感觉就像我错过了一些关于变量绑定和所述绑定时间的基本知识。

对此的任何见解将不胜感激。

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

我对这类渲染问题的默认回答通常是尝试将渲染代码封装在 $timeout 中。

例如：

$timeout(function(){
    lineChart(data);
});

这可确保在执行任何相关渲染代码之前已渲染 DOM。

【讨论】：

感谢您的快速响应，但不幸的是它没有解决问题。
该死的。你能创建一个演示吗？ ui-router 中可能有一些细微差别。您是否也可以尝试将超时设置为较长的时间（例如 2 秒），看看它是否仍然可能与 dom 渲染有关？
Demo 可能已经没有了（它是一个 5k loc 跨约 30 个文件的东西），但我会看看我能做什么。更长的超时时间也不好:(
快速更新：该指令正在观察属性的变化，并在 svg 模板上进行工作，但只是不更新页面。我想这超出了问题的范围？
你修好了吗？我在使用 angularJS 1.6.6 时遇到了同样的问题。

【解决方案2】：

这不是您问题的解决方案，但它可以帮助其他人。我遇到了和你一样的问题，@user3769145。

angular.module('myApp', [])
    .directive('spinner', function ($rootScope) {
        // Directive Link
        function link(scope, element, attrs, controller, transcludeFn) {
            if (!$rootScope.spinnerCount || $rootScope.spinnerCount < 0) {
                $rootScope.spinnerCount = 0;
            }
        }

        // Directive Return
        return {
            restrict: 'E', // use only as element
            transclude: true,
            template:   '<div class="spinner mini" style="display: none;">' +
            '<img src="images/logos.svg" alt="Loading data">' +
            '<span>Loading Data...</span>' +
            '</div>',
            link: link
        };
    })

我的错是在模板中使用了 transclude 而没有使用 ngTransclude。

【讨论】：