Angularjs 不适用于显示无样式答案

【问题标题】：Angularjs doesn't work for display none styleAngularjs 不适用于显示无样式
【发布时间】：2017-08-16 22:18:37
【问题描述】：

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

Tippy 的 HTML 模板工具提示 (#creating-html-templates) 要求我们将 style="display: none" 用于模板，其余部分由它处理。

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

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

如果您删除 style="display: none"，它会起作用，但 Tippy 不会。

有什么解决办法吗？

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

Tippy 内部：

外部：

Fiddle

【问题讨论】：

您要实现哪些“AngularJS”功能？
@ryanpcmcquen 任何，在小提琴和图像中你可以看到它无法显示消息。

标签： javascript css angularjs

【解决方案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; 隐藏。

然后你的tippy javascript应该是：

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

【讨论】：

谢谢，这解决了 $scope 变量被渲染的问题。但是，它无法与 angularjs 代码进行通信。请参阅：New Fiddle 和更新的问题
@Shank 我已经更新了答案。您需要使用 DOM 元素而不是标识符作为tippy 中的html 选项。
Tippy 不再打开。请参阅：Fiddle。我错过了什么吗？
您需要从工具提示模板中删除display:none;

【解决方案2】：

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

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

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

【讨论】：