Question

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

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

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

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


                }
            }

我想知道这是否需要“附加”到某些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（）并最终使用.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工具提示以返回角度指令？

3 个答案: