指令不渲染页上状态变化之后，但是直接负载

后我有一个通过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); 
      } 
     }) 
    } 
}

线型图树立的数据，并运行它通过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测试完成它。只有通过地址栏直接加载页面才能工作。一旦它正确加载，转换离开图像页面然后回到它，它将继续工作。

这感觉很像我缺少一些关于变量绑定和结合说的时机至关重要。

这个任何见解将是非常赞赏。

来源

2015-08-18 user3769145

我的默认回答这些种类的渲染问题的问题的通常是尝试在$timeout包装你的渲染代码。

如：

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

这保证了DOM已执行任何相关的渲染代码之前被渲染。

来源

2015-08-18 07:11:54

感谢您的快速响应，但不幸的是它并没有解决问题。 – user3769145

该死的。你能创建一个演示吗？ 'ui-router'可能会有一些细微之处。你还可以尝试设置超时时间（如2秒），看看它是否仍然可能与dom渲染有关？ –

演示可能会超出它（这是一个约30个文件的5k loc），但我看不出我能做什么。更长的超时时间不是很好:( – user3769145

指令不渲染页上状态变化之后，但是直接负载

回答

相关问题