How to use custom Angular filter inside directive with D3

Question

I have a custom date/time filter I've built called formatDateSimple . I use this in my Angular templates like so:

{{givenDate | formatDateSimple}}

I've also built a custom directive using D3 (a scatterplot). I want to show the formatted date/time of each 'dot' in my scatterplot while hovering over them.

Below is the relevant code found within the link function of my directive:

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');

This is the result in my tooltip:

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

How can I correctly apply this filter?

Answer 1

Use $filter in the directive, JavaScript usage is described on every filter page: docs.angularjs.org/api/ng/filter/number .

For your example it'd probably be

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

Don't forget to require $filter as a dependency.