Angularjs不适用于display none样式

Question

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

Tippy的HTML模板工具提示(#icreating-html-templates)要求我们使用style="display: none"模板,然后处理其余部分.

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

这是一个重现问题的小提琴.#小提琴

如果删除style="display: none"它有效,但Tippy没有.

这有什么走势吗？

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

在Tippy里面:

外:

小提琴

Answer 1

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

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

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

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

然后你的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')
  })
});