2

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

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

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

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


                }
            }

我想知道这是否需要“附加”到某些 DOM 元素才能工作，但如果是这样，我不确定该元素是为工具提示命名的吗？

4

3 回答 3

3

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

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

}
于 2016-02-05T23:18:10.410 回答
1

我能够让它与参数一起工作。我从他们的答案中分叉了 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();
于 2016-07-08T17:41:35.017 回答
1

我对此有一个麻烦，我无法为指令提供参数。 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>'
  };
});
于 2016-03-03T10:24:54.477 回答