如何在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作為依賴項。