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不適用於顯示無風格

回答

相關問題