1

I have problem similar to Getting Highcharts tooltip to return an angular directive?. But I tried to create some complex tooltip using directive wich has definied templateUrl instead using inline template. When I use templateUrl, html is loaded asynchronusly and when I'm using it into tooltip formatter it is no loaded yet.

I need use html template because I need to define a tooltpip which should has clickable navigation button to other site and prepared for one data serie, also should be translated and styled.

Community
  • 1
  • 1
Monter
  • 11
  • 3

1 Answers1

1

When you call $compile with a directive with a templateUrl, the content isn't updated until a digest cycle runs.

Since you are within a jQuery event (outside Angular digest cycle) you need to manually trigger a $scope.$digest().

See forked Plunker & snippet below:

tooltip: {
    useHTML: true,
    pointFormatter: function () {
        var element = $compile('<chart-tooltip></chart-tooltip>')($scope);
        $scope.$digest();
        return element.html();
    }
}

(Also added missing useHTML: true)

sheilak
  • 5,833
  • 7
  • 34
  • 43