在Angular指令中使用$ filter

Question

我已经构建了一个Angular指令来显示D3可视化.我在y轴上$filter的tickFormat函数中使用如下:

ySalesAxis = d3.svg.axis()
  .orient('left')
  .ticks(6)
  .scale(ySalesScale)
  .tickFormat(function(d) {
    return $filter('formatSalesValue')(d.value, 'USD');
  });

我看到的问题是,当页面首次加载时,这些刻度标签都不会出现.确实,如果我console.log($filter('formatSalesValue')(d.value, 'USD'))得到6 undefined(因为我的ticks财产设置为6).但是,一旦我执行操作,例如在画笔过滤器内单击,标签标签就会显示格式正确.

我的formatSalesValue过滤器调用服务(异步操作),因为有许多货币循环进出系统,我从数据库中检索的详细信息.我确定这是我的tick标签未定义的原因.我该怎么做才能确保在页面加载后立即显示这些值？注意:我试图tickFormat在调用中包装我的函数scope.$apply但是我收到digest already in progress错误.

Answer 1

Axis的tickFormat方法运行传递回调并使用它以同步方式返回的值.这就是你在第一次调用时未定义的原因,因为你的$ filter是异步的.

如果此异步调用仅出于性能原因,则应使其同步并在其他位置寻找改进.如果有角度观察这么多独立的变化,它可能会因$ digest周期而受阻.

如果你制作JSBin我可能会告诉你更多.