AngularJS不适用于无显示样式 [英] Angularjs doesn't work for display none style

问题描述

我正在尝试将AngularJS与

这里是一个小提琴，它再现了问题.

外部:

小提琴

解决方案

将元素ID用作html选项会删除所有javascript绑定.要保留它们，请使用DOM元素.您还应该在连接了控制器的元素内追加.

 <！-将ID添加到控制器div->< div ng-controller ="FrameController as vm" id ="controller"> 

您还需要从模板html中删除 display:none; .从文档:

如果要将模板的内容克隆到工具提示中，请在html设置中指定模板的ID.否则，请使用DOM元素本身，使您可以保持侦听器的连接.如果您使用DOM元素选择，请确保它不会被显示隐藏:none;.

然后您的小费javascript应该是:

  setTimeout(function(){angular.bootstrap(document.getElementById('body')，['app']);tippy('.tippy'，{位置:底部"，动画:淡入淡出"，箭头:是的，互动式:真实，/*以下两行是新的*/html:document.getElementById('my-template-id')，appendTo:document.getElementById('controller')})}); 

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.

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:

Outside:

Fiddle

解决方案

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

这篇关于AngularJS不适用于无显示样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！