CODEWITHSUNDEEP
javascriptcssangularjs
Shank
Shank

Reputation: 1398

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

Upvotes: 0

Views: 1785

Answers (2)

Razzildinho
Razzildinho

Reputation: 2584

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

Upvotes: 5

bruno.bologna
bruno.bologna

Reputation: 475

It's because the resulting html and widget is working outside angular scope. The same would happen if you try to implement boostrap widgets and add some angular behavior. That's why boostrap-ui exists, to bridge those two worlds.

The best way to workaround this is by creating directives that link your js pluging with angular. When doing the directive, you might need to recreate the plugin when the expression changes by setting a watcher on vm.message.

See this post as an example: http://bencentra.com/code/2015/09/29/jquery-plugins-angular-directives.html

Upvotes: 1

Related Questions