Angularjs不适用于显示无风格

我正在尝试将AngularJS与Tippy.JS用于工具提示。Angularjs不适用于显示无风格

提宝的HTML模板工具提示（#creating-html-templates）要求我们使用style="display: none"作为模板，并处理其余部分。

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

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

如果您删除style="display: none"它可以工作，但是Tippy不会。

这有什么解决方法吗？

更新 @Razzildinho解决方案仅用于呈现值。但它不能传回控制器。这是单向的数据绑定，模型tippy。

内毛尖：

外：

Fiddle

来源

2017-08-15 Shank

什么AngularJS“的特点是你想实现？ – ryanpcmcquen

@ryanpcmcquen任何，在小提琴和图像你可以看到，它不能显示消息。 – Shank

使用元素的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元素选择，请确保它不隐藏显示：none ;.

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

来源

2017-08-15 20:44:00 Razzildinho

谢谢，这解决了$ scope变量被渲染的问题。但是，它无法回传给angularjs代码。参见：[New Fiddle]（http://jsfiddle.net/Shank09/h8to34ux/35/）和更新问题 – Shank

@Shank我已经更新了答案。您需要使用DOM元素而不是标识符作为tippy中的'html'选项。 – Razzildinho

提皮不再打开。请参阅：[Fiddle]（http://jsfiddle.net/Shank09/h8to34ux/36/）。我错过了什么？ – Shank

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

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

看到这个职位为例：http://bencentra.com/code/2015/09/29/jquery-plugins-angular-directives.html

来源

2017-08-15 20:41:28

Angularjs不适用于显示无风格

回答

相关问题