如何在D3中使用自定义Angular过滤器

Question

我有一个名为formatDateSimple的自定义日期/时间过滤器。我在我的Angular模板中使用它，如下所示：

{{givenDate | formatDateSimple}}

我还使用D3（散点图）构建了一个自定义指令。我想在我的散点图中显示每个'点'的格式化日期/时间，同时将鼠标悬停在它们上面。

以下是我的指令的链接功能中的相关代码：

function showTooltip(d) {
  var element = d3.selectAll('.transactions.x' + d.id);
  angular.element(element).popover({
    placement: 'auto top',
    container: '#vis',
    trigger: 'manual',
    html: true,
    content: function() {
      return '<p>{{' + d.create_date + ' | formatDateSimple}}</p>'
    }
  });

  angular.element(element).popover('show');

这是我的工具提示中的结果：

{{2016-01-01T15:19:07.304Z | formatDateSimple}}

如何正确应用此过滤器？

Answer 1

在指令中使用$filter，每个过滤器页面都会描述JavaScript用法：docs.angularjs.org/api/ng/filter/number。

对于你的例子，它可能是

$filter('formatDateSimple')( d.create_date )

不要忘记要求$ filter作为依赖项。