将html DIV放入popover内容角度UI

时间:2014-03-26 10:50:56

标签: angularjs twitter-bootstrap angular-ui angular-ui-bootstrap

是否可以将html内容放入popover? 这是我需要放入popover的字符串

HTML

$scope.info="sentence " +
    "<ul>"+
    "<li>first list member</li>"+
        "<ul>"+
        "<li>element of the first list</li>"+
        "</ul>"+
    "</li>"+
    "<li>second element</li>"+
    "<ul>"+
        "<li id=\"infoLi\">element of the second</li>"+
    "</ul>"+
    "<li>third element</li>"+
    "<ul>"+
        "<li id=\"infoLi\">first element of the third</li>"+
        "<li id=\"infoLi\">second element of the third</li>"+
    "</ul>"+       
"</ul></div>"

我在angular-ui-popover的文档中已经看到,可以设置popover的选项,并且在网络上看到我发现有人说在这个选项中可以设置参数HTML为true并获得此结果。
我没有发现任何样本,我不知道是否属实,我尝试这个问题的第一个问题是我不明白如何设置选项。
对我来说可能的解决方案是在popover中留下一个字符串,但我需要使用新的行标记,我发现它在弹出内容中不起作用。

修改

也许我不太清楚,我正试图用角度ui和ui bootstrap做到这一点。

1 个答案:

答案 0 :(得分:1)

好的,我找到了一个解决方案,正如我所看到的那样,目前它不适用于弹出窗口,而工具提示是的。

HTML

<button id="infobtn" tooltip-html-unsafe="<div>first list member
                                         <li>element of the first list</li>
                                         second element
                                         <li id='infoLi'>element of the second</li>
                                         third element
                                         <li id=\"infoLi\">first element of the third</li>
                                         <li id=\"infoLi\">second element of the third</li>
                                         </div>
    "tooltip-trigger="mouseenter">
    <img src="images/info.png"></button>

标签tooltip-html-unsafe使得插入DIV或其他任何东西都是html,在工具提示内容中,我也尝试在popover中使用它,但由于某种原因它不起作用。我不知道原因是否是我做错了,所以我决定使用ui.tooltip模块,我已经解决了这个问题。