如何显示上流行的HTML超过采用了棱角分明的用户界面引导？ [英] how to show html on pop over using angular ui bootstrap?
本文介绍了如何显示上流行的HTML超过采用了棱角分明的用户界面引导？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我做流行演示过这样的。它显示弹出了上右侧，当我按一下按钮。但现在的问题是，我怎么会显示在弹出了一些HTML。
＆LT; HTML NG-应用=plunker＆GT; ＆LT; HEAD＆GT;
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js\"></script>
＆LT;脚本的src =// angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js\"></script>
＆所述; SCRIPT SRC =example.js＆GT;＆下; /脚本＆GT;
＆LT;链接HREF =// netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css的rel =stylesheet属性＆GT;
＆LT; /头＆GT; ＆LT;身体GT;
＆LT;按钮酥料饼贴装=正确的酥料饼=！右侧的类=BTN BTN-默认＆GT;右＆LT; /按钮＆GT;
＆LT; /身体GT;
＆LT;脚本＆GT;
angular.module（'plunker'，['ui.bootstrap']）;＆LT; / SCRIPT＆GT;＆LT; / HTML＆GT;
我有这样的HTML我需要怎么上流行过。我添加此知道有在bootrap.js对酥料饼。我添加HTML的方式不想使用我想用角UI bootrap.js
＆LT; DIV NG控制器=axcont＆GT;
＆LT; UL类=列表组＆GT;
＆LT;李班=列表组项NG点击=增加（）＆gt;添加一行＆LT; /李＆GT;
＆LT;李班=列表组项NG点击=deleteRow（$指数）＆GT; Deleterow＆LT; /李＆GT;＆LT; / UL＆GT;
＆LT; / DIV＆GT;
我没有更多的尝试，象这样的，但得到undefined.May是我错了，我只是在做RND
＆LT; HTML NG-应用=plunker＆GT; ＆LT; HEAD＆GT;
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js\"></script>
＆LT;脚本的src =// angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js\"></script>
＆所述; SCRIPT SRC =example.js＆GT;＆下; /脚本＆GT;
＆LT;链接HREF =// netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css的rel =stylesheet属性/＆GT;
＆LT; /头＆GT; ＆LT;身体GT;
＆LT;按钮弹出了标题=内容的URL运输方式=pop.html级=BTN BTN-默认＆GT;右＆LT; /按钮＆GT;
＆LT; /身体GT;
＆LT;脚本＆GT;
VAR一个= angular.module（'plunker'，['ui.bootstrap']）;
a.directive（'酥料饼'，函数（$编译，$ HTTP，$ templateCache）{
返回{
限制：'A'，
适用范围：真，
链接：功能popOverPostLink（范围，ELEM，ATTRS）{
$ http.get（attrs.contentUrl，{缓存：$ templateCache}）。成功（
功能（TMPL）{
VAR的选择= {
内容：$编译（TMPL）（范围）
位置：'底'，
HTML：真实，
触发：点击，
标题：attrs.title
};
elem.popover（选件）;
scope.hidePopover =功能（）{
elem.popover（隐藏）;
}
}
）;
}
};
}）;＆LT; / SCRIPT＆GT;＆LT; / HTML＆GT;
解决方案
使用AngularUI引导指令提示-HTML的不安全
＆LT;跨度提示-HTML不安全=＆LT; DIV＆GT;喜＆LT; / DIV＆GT;＆LT; DIV＆GT;喜喜＆LT喜; / DIV＆GT;＆LT; DIV＆GT;喜＆LT; / DIV＆GT ;＆GT;
＆LT; B＆GT;将鼠标悬停在ME＆LT;！/ B＆GT;
＆LT; / SPAN＆GT;
示范和code在这里 Plnkr提示-HTML不安全
I make demo of pop over like this .It show a pop over on right side when I click the button .But now problem is that how I will show some html on pop over .
<html ng-app="plunker">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button popover-placement="right" popover="On the Right!" class="btn btn-default">Right</button>
</body>
<script>
angular.module('plunker', ['ui.bootstrap']);
</script>
</html>
I have this HTML I need to how on add this on pop over .I know there is way in bootrap.js to add html on popover .I don't want to use that I want to use angular UI bootrap.js
<div ng-controller="axcont">
<ul class="list-group">
<li class="list-group-item" ng-click="add()">add row</li>
<li class="list-group-item " ng-click="deleteRow($index)">Deleterow</li>
</ul>
</div>
I did more try on that like that but getting undefined.May be I am wrong I just doing RND
<html ng-app="plunker">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<button pop-over title="Mode of transport" content-url="pop.html" class="btn btn-default">Right</button>
</body>
<script>
var a=angular.module('plunker', ['ui.bootstrap']);
a.directive('popOver', function ($compile, $http, $templateCache) {
return {
restrict: 'A',
scope: true,
link: function popOverPostLink(scope, elem, attrs) {
$http.get(attrs.contentUrl, {cache: $templateCache}).success(
function (tmpl) {
var options = {
content: $compile(tmpl)(scope),
placement: 'bottom',
html: true,
trigger:'click',
title: attrs.title
};
elem.popover(options);
scope.hidePopover = function () {
elem.popover('hide');
}
}
);
}
};
});
</script>
</html>
解决方案
Use AngularUI Bootstrap directive tooltip-html-unsafe
<span tooltip-html-unsafe="<div>Hi</div><div>Hi Hi Hi</div><div>Hi</div>">
<b>Hover on Me!</b>
</span>
Demo and code is in here Plnkr tooltip-html-unsafe
这篇关于如何显示上流行的HTML超过采用了棱角分明的用户界面引导？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
