How to use Angularjs filter in d3 html element?

Question

I have a web application that integrates Angularjs and d3js. One of my directives called dailyViewinstalls a tooltip using a function drawtooltip()defined in a service called cfg. The directive code is similar to the following:

app.directive('dailyView', ['cfg', function (cfg) {

  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      scope.$watch('daily', function(newVal, oldVal) {
        if (!newVal) return;
        cfg.drawDaily(scope.daily[attrs.bus], element, attrs.bus);
        $('#sortable2').sortable({
            start: scope.dragStart,
            update: scope.dragEnd
        });
        cfg.drawTooltip();
      });
    }
  };
}]);

On the other hand, a function drawtooltip()is defined as:

app.factory('cfg', ['$window', '$rootScope', '$cookieStore', function($window, $rootScope, $cookieStore){
 function drawTooltip(){

  var tooltip = d3.select(".tooltip");

  d3.selectAll(".myImage")
    .on("mousemove", function(d){
      tooltip.transition().duration(100)
        .style("opacity", .9);
      tooltip.html('<p>{{"' + d.measure + '"|myLocationFilter}}</p>')
        .style("left", (d3.event.pageX + 20)  + "px")
        .style("top", (d3.event.pageY - 110) + "px");    
    })
    .on("mouseout", function(d) {
      tooltip.transition().duration(200)
        .style("opacity", 0);
    });
}

My angular filter should convert the string d.measureto descriptive text that changes based on the browser language. The problem is that my filter is not recognized, and my hint just shows the following text (for example, when the dimension data associated with an element is the string "plug": {{"plug" | myLocationFilter}}.

angular d3js html?

: - , .

1: $compile() (scope) cfg.drawtooltip(), angular .

2: , , , html() d3. - , $compile() , outerHTML ?

Answer 1

$compile() .

:

 tooltip.html('<p>{{"' + d.measure + '"|myLocationFilter}}</p>')

:

 var compiledElement = $compile('<p>{{"' + d.measure + '"|myLocationFilter}}</p>')($rootScope);
 tooltip.html(compiledElement);

. . $rootScope, factory, . , , $compile, .

, .