Getting Highcharts tooltip to return an angular directive using templeteUrl?

Question

I have problem similar to Getting Highcharts tooltip to return an angular directive?. But I tried to create some complex tooltip using directive which has defined templateUrl instead using inline template. When I use templateUrl, html is loaded asynchronously 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 tooltip which should have clickable navigation button to other site and prepared for one data series, also should be translated and styled.

plnkr : plnkr.co/edit/6aV7tzzoWNjlWPtdMxSS?p=preview

Monter
– Monter

2016-09-30 05:54:14 +00:00
Commented Sep 30, 2016 at 5:54 — Monter
– Monter, Commented Sep 30, 2016 at 5:54

sheilak · Accepted Answer · 2016-10-03 21:30:43Z

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)

answered Oct 3, 2016 at 21:30

sheilak

5,8737 gold badges36 silver badges46 bronze badges

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

Collectives™ on Stack Overflow

Getting Highcharts tooltip to return an angular directive using templeteUrl?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related