Getting Highcharts tooltip to return an angular di

Question

We are trying to create some complex tooltips for our Highcharts graph, that will be showing some dynamic data thats in the app but not displayed by the graph, so I figured the best bet was to create an angular directive for all the formatting and such, and then enable the useHTML : true attribute of highcharts along with a custom formatter function. The $compile() doesn't throw an error..

However when this code runs, the tooltip just shows Object.object as the text, and not the content of the directive's template. Am I missing something, or is this not going to be possible? Below is an example of what we're trying...

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

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


                }
            }

I'm wondering if this needs to be 'appended' to some DOM element to work, but if so I'm not sure what the element is named for the tooltip?

Answer 1

I've got a trouble about that, I can't give a paremeter to the directive. http://jsfiddle.net/tux82Lvw/

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

By the way, the directive scope is ok, the only trouble is with the template compilation

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

Answer 2

You are giving the formatter a dom element, and it wants an html string. Converting it back to html works, but it seems like an inefficient way to accomplish your goal.
http://jsfiddle.net/ue3x49tt/3/

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

}

Answer 3

I was able to get this to work with parameters. I forked user2422856 jsfiddle from their answer to show how http://jsfiddle.net/xhfgzfps/1/ .

I had to compile the directive, then do a $scope.$digest() and finally return the markup using .html(). I haven't been able to figure out how to do this without manually triggering a digest.

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