Getting Highcharts tooltip to return an angular directive?

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?

Here is a basic fiddle of what I'm trying to do. The directive alone works but as a tooltip doesnt http://jsfiddle.net/ue3x49tt/ — Ed Roper, Feb 05 '16 at 19:51

score 3 · Accepted Answer · answered Feb 05 '16 at 23:18

3

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

}

answered Feb 05 '16 at 23:18

Barbara Laird

12,599
2
44
57

Thanks very much for the answer. Can you elaborate on why you think this is inefficient however. We will actually be creating about 20 custom tooltips we need to display, so I thought a directive for each would help keep it a little neater, at least code wise... – Ed Roper Feb 06 '16 at 00:34
@EdRoper My concern is that you are creating dom elements (that you don't need) from html and then converting them back to html strings. Angular isn't my thing, so this might be pertly acceptable overhead. – Barbara Laird Feb 08 '16 at 16:33
but how to do event binding? it will just return html string only! – Yogesh Jagdale Sep 20 '16 at 14:59
@YogeshJagdale - I don't understand your question. If you have a new question, you should ask it as a question instead of a comment. – Barbara Laird Sep 20 '16 at 17:26
@BarbaraLaird : In the jsfiddle, can we have templateUrl instead of the template to get the html content from the separate file? I am unable to get the html content when using templateUrl but getting the html content when using template in the tooltip – Raphael Feb 16 '17 at 06:38

score 1 · Answer 2 · answered Mar 03 '16 at 10:24

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

score 1 · Answer 3 · answered Jul 08 '16 at 17:41

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

Getting Highcharts tooltip to return an angular directive?

3 Answers3

Linked