javascript 如何使用 angular ui bootstrap 在弹出窗口中显示 html？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25215295/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to show html on pop over using angular ui bootstrap?
提问by Shruti
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。
<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
我有这个 HTML 我需要如何在 pop over 上添加它。我知道 bootrap.js 有办法在 popover 上添加 html。我不想使用我想使用 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
我做了更多这样的尝试，但没有定义。可能是我错了，我只是在做 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>
回答by bhantol
Use AngularUI Bootstrap directive tooltip-html-unsafe
使用 AngularUI Bootstrap 指令 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
演示和代码在这里Plnkr tooltip-html-unsafe
回答by Devvie
According to the docs Angular-ui, you should be defining the popover as uib-popoverinstead of just popover, and if you would like to bind html to the popover you would either use uib-popover-html="<div> hello </div>"or template binding uib-popover-template="<<teamplateNameHere>>"
根据文档Angular-ui，您应该将 popover 定义为uib-popover而不是 just popover，如果您想将 html 绑定到 popover，您可以使用uib-popover-html="<div> hello </div>"或模板绑定uib-popover-template="<<teamplateNameHere>>"
回答by user7398648
In your options, add a templateUrl.
在您的选项中，添加一个 templateUrl。
For example:
例如：
templateUrl: 'your/url' + type + 'popup.html'
More info: https://github.com/angular-ui/bootstrap/tree/master/src/modal/docs
更多信息：https: //github.com/angular-ui/bootstrap/tree/master/src/modal/docs
回答by Vishnu T Asok
tooltip-html-unsafeWith Image and Style Tag
带有图像和样式标签的tooltip-html-unsafe
<span tooltip-html-unsafe="<img src='https://upload.wikimedia.org/wikipedia/commons/0/00/Lubuntu-icon.png' style='width:24px;'>
<div style='font-size:24px;'>Tooltip With Image</div>">
<b>Hover on Me!</b>
</span>
回答by Myxuan
tooltip-html-unsafeyou can put anything in it
tooltip-html-unsafe你可以在里面放任何东西
