Angularjs不适用于display none样式

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

我正在尝试将AngularJS与Tippy.JS一起用于工具提示。

Tippy's HTML template tooltip (#creating-html-templates) requires us to use style="display: none" for the template, and it handles the rest.

Tippy的HTML模板工具提示（#icreating-html-templates）要求我们为模板使用style =“display：none”，并处理其余部分。

I want to use angularjs features in the tooltip template but failed.

我想在工具提示模板中使用angularjs功能但是失败了。

Here is a fiddle which reproduces the problem. #fiddle

这是一个重现问题的小提琴。＃小提琴

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

如果你删除style =“display：none”它可以工作，但是Tippy没有。

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.

更新@Razzildinho解决方案仅用于呈现值。但它无法与控制器通信。它是单向数据绑定，模型为tippy。

Inside Tippy:

在Tippy里面：

Outside:

外：

Fiddle

小提琴

2 个解决方案

#1

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.

使用元素id作为html选项将删除所有javascript绑定。让他们使用DOM元素。您还应该在附加了控制器的元素中追加。

<!-- 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:

你还需要删除display：none;来自你的模板html。从文档：

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;.

如果要将模板的内容克隆到工具提示中，请在html设置中指定模板的ID。否则使用DOM元素本身，它允许您保持连接侦听器。如果您使用DOM元素选项，请确保不使用display：none;隐藏它。

And then your javascript for tippy should be:

然后你的jppy应该是：

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

#2

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.

这是因为生成的html和小部件在角度范围之外工作。如果您尝试实现boostrap小部件并添加一些角度行为，也会发生同样的情况。这就是为什么boostrap-ui存在，以弥合这两个世界。

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.

解决此问题的最佳方法是创建将js pluging与angular链接的指令。执行该指令时，您可能需要在表达式更改时通过在vm.message上设置观察程序来重新创建插件。

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

以此文章为例：http：//bencentra.com/code/2015/09/29/jquery-plugins-angular-directives.html

#1