javascript - 在 Angular 指令中使用 $filter

Question

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

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 过滤器调用一个服务(异步操作)，因为有几十种货币循环进出系统，我从数据库中检索它们的详细信息。我确信这就是我的刻度标签未定义的原因。我该怎么做才能确保这些值在页面加载后立即显示？注意:我试图在对 scope.$apply 的调用中包装我的 tickFormat 函数，但我得到了一个 digest already in progress 错误。

Answer 1

Axis 的 tickFormat 方法运行传递的回调并以同步方式使用它返回的值。这就是为什么您在第一次调用时得到 undefined 的原因，因为您的 $filter 是异步的。

如果此异步调用只是出于性能原因，您应该使其同步并在其他地方寻求改进。如果 Angular 监视如此多的独立更改，它可能会被 $digest 循环阻塞。

如果你制作 JSBin，我可能会告诉你更多信息。