Javascript 如何在d3工具提示的html元素中使用Angularjs过滤器？

我有一个结合了Angularjs和d3js的web应用程序。我的一个名为

dailyView

的指令使用在名为

cfg

的服务中定义的函数

drawtooltip（）

设置工具提示。指令代码类似于以下内容：

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();
      });
    }
  };
}]);

另一方面，

drawTooltip（）

函数的定义如下：

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

app.factory（'cfg'、['$window'、'$rootScope'、'$cookieStore'，函数（$window、$rootScope、$cookieStore）{
函数drawTooltip（）{
var tooltip=d3。选择（“.tooltip”）；
d3.选择全部（“.myImage”）
.on（“mousemove”，函数（d）{
tooltip.transition（）.持续时间（100）
.样式（“不透明度”，.9）；
html（'{{'+d.measure+'{124; myLocationFilter}}
'）
.style（“左”（d3.event.pageX+20）+“px”）
.style（“top”，（d3.event.pageY-110）+“px”）；
})
.开启（“鼠标出”，功能（d）{
tooltip.transition（）.持续时间（200）
.样式（“不透明度”，0）；
});
}

我的角度过滤器应将

d.measure

字符串转换为基于浏览器语言更改的描述性文本。问题是，我的过滤器无法识别，工具提示仅显示以下文本（例如，当绑定到元素的度量数据是字符串“plug”时）：{{“plug”| myLocationFilter}

如何将角度过滤器注入d3js html元素

注：这是一个相当类似的问题，尚未得到回答

编辑1：在调用

cfg.drawtooltip（）

之后，我尝试在指令中使用$compile（）（scope），但角度过滤器不起作用

编辑2：在测试了注释中提供的多个建议后，很明显问题在于使用d3选择的

html（）

方法。是否可以等到处理完

$compile（）

后再使用结果对象的outerHTML值

在输出值之前，需要

$compile（）

该值

这一行：

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

tooltip.html（'{{{{'+d.measure+'{124; myLocationFilter}}
'））

应该是这样的：

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

var compiledElement=$compile（'{{{{d.measure+'{124; myLocationFilter}}}
'）（$rootScope）；
html（compiledElement）；

这应该行得通。 我做了一个小把戏。你需要注入并使用

$rootScope

，因为你在一个没有自己作用域的工厂中调用它。当然还有

$compile

，这对你来说很神奇

---

一般来说，在工具提示中也使用指令似乎是一个好主意。

为什么不在d3代码中对文本进行插值，而是对其进行求值？嗨，Jeff，谢谢你的建议。这会起作用，但我只是想知道是否有可能实现我的想法。你需要使用

$compile来编译工具提示htmle

如果使用

angular

将HTML添加到DOM（通过指令），那么这个答案应该会有帮助：发布更多关于如何添加此DOM元素的代码。感谢您的回答。我尝试了相同的方法，但在我的项目中不起作用，但我不明白为什么。您的答案显示了问题所在。您使用jquery选择的

html（）

方法。我使用

html（）

d3选择的方法。在这种情况下，

html（）

需要一个字符串而不是一个对象。我尝试使用对象的outerHTML字段，但该字段似乎没有按时编译，我只得到一个文本，上面写着：{{{这将成为大写字母| uppercase}。关于如何克服此问题的任何建议？包含您对我的尝试所做的修改，以供参考。我最终使用

$q

来确保我使用了“已编译”html，此外，我还必须访问返回对象的outerHTML字段，如下所示：

compiledElement[0].outerHTML

，但是Armin的答案指向了问题的根源，所以答案被接受。@JAC你有没有这样做过？你有没有这样做过？你有多少是我试图做的，在D3选择中，{{value}中的绑定值没有得到评估。