Getting Highcharts tooltip to return an angular di

问题:

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?

回答1:

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();                   

}

回答2:

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>'
  };
});

回答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();