让 Highcharts 工具提示 return 一个 angular 指令？

Question

我们正在尝试为我们的 Highcharts 图表创建一些复杂的工具提示，这将显示应用程序中但图表未显示的一些动态数据，所以我认为最好的选择是创建一个 angular 指令用于所有格式等，然后启用 useHTML : highcharts 的 true 属性以及自定义格式化程序函数。 $compile() 不会抛出错误..

然而，当此代码运行时，工具提示仅将 Object.object 显示为文本，而不是指令模板的内容。我错过了什么，还是这不可能？以下是我们正在尝试的示例...

tooltip: {
                useHTML: true,
                formatter: function () {                        

                    return $compile("<pm-error-rate-tooltip ></<pm-error-rate-tooltip>")($scope);


                }
            }

我想知道这是否需要 'appended' 到某些 DOM 元素才能工作，但如果是这样，我不确定工具提示的元素名称是什么？

Answer 1

您正在为格式化程序提供一个 dom 元素，而它需要一个 html 字符串。将其转换回 html 可行，但它似乎是实现目标的低效方法。
http://jsfiddle.net/ue3x49tt/3/

formatter: function () {                  
    return $compile("<pm-error-rate-tooltip></pm-error-rate-tooltip>")($scope).html();                   

}

Answer 2

我遇到了麻烦，我不能给指令一个参数。 http://jsfiddle.net/tux82Lvw/

return $compile("<pm-error-rate-tooltip test='test'></pm-error-rate-tooltip>"

顺便说一句，指令范围还可以，唯一的问题是模板编译

//datacompliance
angular.module('myapp').directive('pmErrorRateTooltip', function() {
  return {
  scope:{test:'='},
  link:function($scope){
    console.log($scope)
  },
  restrict: 'E',
    template: '<b>{{test}}</b>'
  };
});

Answer 3

我能够让它与参数一起工作。我从他们的答案中分叉了 user2422856 jsfiddle 来展示如何 http://jsfiddle.net/xhfgzfps/1/ .

我必须编译指令，然后执行 $scope.$digest()，最后 return 使用 .html() 的标记。如果不手动触发摘要，我无法弄清楚如何执行此操作。

$scope.test = "Dont work"
var toolTip = $compile("<pm-error-rate-tooltip test='test'></pm-error-rate-tooltip>")($scope);
$scope.$digest();
return toolTip.html();

让 Highcharts 工具提示 return 一个 angular 指令？

Getting Highcharts tooltip to return an angular directive?

javascript

jquery

highcharts

angularjs

highcharts-ng