我有一个网页应用程序,结合了Angularjs和d3js。我的一个指令称为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);
});
}
我的Angular过滤器应将字符串转换为一个根据浏览器语言变化的描述性文本。问题在于我的过滤器没有被识别,当绑定到元素的measure数据是字符串"plug"时,我的提示框只显示以下文本{{"plug"|myLocationFilter}}。
我该如何将我的Angular过滤器注入到d3js HTML元素中?
注意:这个 是一个相似但尚未得到答案的问题。
编辑1:我已经尝试在指令中调用
cfg.drawtooltip()
之后立即使用$compile()(scope),但angular过滤器不起作用。编辑2:在测试评论中提供的多个建议后,清楚地发现问题在于使用了d3选择集的
html()
方法。是否有可能等待$compile()
处理完毕,然后使用结果对象的outerHTML值?
angular
将 HTML 添加到 DOM(通过指令),那么这个答案应该会有所帮助:https://dev59.com/XnjZa4cB1Zd3GeqPe4TQ#19663183 请发一些关于添加此 DOM 元素的更多代码。 - musically_utdrawTooltip
。 - Pieter HerroelendrawTooltip
,那么我将从我的服务中调用$compile
而不是我的指令。我尝试过这样做,但它没有起作用。我还尝试过类似于此参考中的$compile(element.contents())(scope)
,但似乎也不起作用。 - JAC