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 jsfiddle.net/ue3x49tt — Ed Roper
– Ed Roper, Commented Feb 5, 2016 at 19:51

Barbara Laird · Accepted Answer · 2016-02-05 23:18:10Z

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 5, 2016 at 23:18

Barbara Laird

12.7k2 gold badges48 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ed Roper Over a year ago

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...

Barbara Laird Over a year ago

@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.

Yogesh Jagdale Over a year ago

but how to do event binding? it will just return html string only!

Barbara Laird Over a year ago

@YogeshJagdale - I don't understand your question. If you have a new question, you should ask it as a question instead of a comment.

Raphael Over a year ago

@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

CharlesD · Accepted Answer · 2016-03-03 10:24:54Z

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

answered Mar 3, 2016 at 10:24

CharlesD

2571 gold badge3 silver badges5 bronze badges

Comments

Ben Smith · Accepted Answer · 2016-07-08 17:41:35Z

1

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

answered Jul 8, 2016 at 17:41

Ben Smith

721 silver badge7 bronze badges

Collectives™ on Stack Overflow

Getting Highcharts tooltip to return an angular directive?

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related