Question

我有一个自定义指令，它接收数据，通过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不会显示任何图表。只有通过地址栏直接加载页面才有效。
。一旦正确加载后转移离开图像页面，然后返回到它。它将继续工作。

这非常像我遗漏了关于变量绑定和所述绑定时间的基本信息。

对此的任何见解都将非常感激。

Answer 1

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

例如：

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

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

Answer 2

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

public function create()
    {
        $member = new Member;
        $data = array();
        $data['member'] = $member;
        $data['languages'] = Language::pluck('name', 'id');
        $data['interests'] = Interest::pluck('name', 'id');

        return view('members.create', $data);
    }

我的错是使用transclude而不是在模板中使用ngTransclude。

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

2 个答案: