Angularjs不适合展示无风格

Question

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

Tippy的HTML模板工具提示（#creating-html-templates）要求我们使用style="display: none"作为模板，然后处理剩下的工作。

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

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

如果你移除style="display: none"它可行，但是Tippy没有。

这有什么走势吗？

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

Tippy内部：

外：

Fiddle

Answer 1

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

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

您还需要从模板html中删除display: none;。来自documentation：

  

如果要将模板的内容克隆到工具提示中，请在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')
  })
});

Answer 2

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

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

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