Shank Shank - 2 years ago 100
AngularJS Question

Angularjs doesn't work for display none style

I'm trying to use AngularJS with Tippy.JS for tooltips.

Tippy's HTML template tooltip (#creating-html-templates) requires us to use

style="display: none"
for the template, and it handles the rest.

I want to use angularjs features in the tooltip template but failed.
enter image description here

Here is a fiddle which reproduces the problem. #fiddle

If you remove
style="display: none"
it works, but Tippy doesn't.

Is there any walkarounds for this?

Update
@Razzildinho solution works only to render the value. but it cannot communicate back to the controller. It is one-way data binding, model to tippy.

Inside Tippy:

enter image description here

Outside:

enter image description here

Fiddle

Answer Source

Using the element id as the html option removes all javascript bindings. To keep them use the DOM element. You should also append within the element that has your controller attached.

<!-- Add ID to the controller div -->
<div ng-controller="FrameController as vm" id="controller">

You also need to remove the display: none; from your template html. From the documentation:

If you want to clone the template's content into the tooltip, specify the template's id in the html setting. Otherwise use the DOM element itself, which allows you to keep listeners attached. If you use the DOM element choice, ensure it's not hidden with display: none;.

And then your javascript for tippy should be:

setTimeout(function() {
  angular.bootstrap(document.getElementById('body'), ['app']);
  tippy('.tippy', {
    position: 'bottom',
    animation: 'fade',
    arrow: true,
    interactive: true,
    /* The following 2 lines are new */
    html: document.getElementById('my-template-id'),
    appendTo: document.getElementById('controller')
  })
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download