Angularjs不适合展示无风格

时间:2017-08-15 19:58:10

标签: javascript css angularjs

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

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

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

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

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

这有什么走势吗?

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

Tippy内部:

enter image description here

外:

enter image description here

Fiddle

2 个答案:

答案 0 :(得分:5)

使用元素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')
  })
});

答案 1 :(得分:1)

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

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

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