AngularJS不適用於無顯示樣式

Question

我正在嘗試將AngularJS與Tippy.JS一起使用作為工具提示。

Tippy的HTML模板工具提示（ ＃creating-html-templates ）要求我們對模板使用style="display: none" ，其余的都要處理。

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

這是重現問題的小提琴。 ＃小提琴

如果刪除style="display: none"則可以，但是Tippy不能。

有沒有解決方法？

更新 @Razzildinho解決方案僅適用於呈現值。 但它無法與控制器通訊。 它是單向數據綁定，建模為小費。

內部Tippy：

外：

小提琴

Answer 1

使用element 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;隱藏。

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

Answer 2

這是因為生成的html和小部件在角度范圍之外工作。 如果嘗試實現boostrap小部件並添加一些角度行為，也會發生相同的情況。 這就是存在boostrap-ui來橋接這兩個世界的原因。

解決此問題的最佳方法是通過創建將您的js插件與angular鏈接起來的指令。 執行該指令時，可能需要通過在vm.message上設置觀察程序來在表達式更改時重新創建插件。

參見以下帖子示例： http : //bencentra.com/code/2015/09/29/jquery-plugins-angular-directives.html