twitter-bootstrap “扩展” Angular UI Bootstrap Popover
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23406357/
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
"Extending" Angular UI Bootstrap Popover
提问by Mistic
(I'm kinda new to AngularJS)
（我对 AngularJS 有点陌生）
I would like to create a directive which triggers a Bootstrap Popover when the user click on the element where the directive is put. To popover will have an HTML content generated inside my directive and elements in this HTML will have ng-click directives.
我想创建一个指令，当用户单击放置指令的元素时触发 Bootstrap Popover。弹出窗口将在我的指令中生成一个 HTML 内容，并且此 HTML 中的元素将具有 ng-click 指令。
I "plain jQuery" it would simply be
我“简单的 jQuery”它只是
element.popover({
content: myGeneratedContent
})
.popover('show');
// some code to attach events to the content
But I can't really figure out how to achieve this with Angular UI. Any clue ?
但我真的不知道如何使用 Angular UI 实现这一点。任何线索？
Thanks
谢谢
--
——
what I want to do is a button for https://github.com/mistic100/Angular-Smilieswhich display all available smileys and, on click, add the corresponding shortcode to the binded model.
我想要做的是https://github.com/mistic100/Angular-Smilies 的一个按钮，它显示所有可用的笑脸，然后点击，将相应的短代码添加到绑定模型中。
采纳答案by Mistic
Seems like I was no clear enough, my problem was not (yet) to add HTML in the popover bu to create the popover from my own directive.
似乎我还不够清楚，我的问题不是（还）在弹出窗口中添加 HTML 以从我自己的指令创建弹出窗口。
This is a way to do it:
这是一种方法：
.directive('myDirective', function() {
return {
restrict: 'A',
template: '<span popover="content" popover-title="title"></span>',
link: function($scope) {
$scope.content = '.....';
$scope.title = '.....';
}
};
})
And about HTML content, Chi Row gave a solution which is not applicable yet with the official version (tough available on a fork https://github.com/jbruni/bootstrap-bower-jbruni)
关于 HTML 内容，Chi Row 给出了一个解决方案，目前还不适用于官方版本（在 fork 上很难使用https://github.com/jbruni/bootstrap-bower-jbruni）
aet version also work on the current version
aet 版本也适用于当前版本
回答by aet
The ui-bootstrap docs are pretty good. However, you said you wanted to put html in your popover. The ui-bootstrap popover does not support that. We have added some "extra" popover stuff in a separate module in our project, maybe you could try something like this too.
ui-bootstrap 文档非常好。但是，你说你想把 html 放在你的弹出窗口中。ui-bootstrap popover 不支持。我们在我们项目的一个单独的模块中添加了一些“额外”的弹出窗口，也许你也可以尝试这样的事情。
.directive( 'popoverHtmlPopup', [ function() {
return {
restrict: 'EA',
replace: true,
scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
templateUrl: 'template/popover/popover-html.html'
};
}])
.directive( 'popoverHtml', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', function ( $compile, $timeout, $parse, $window, $tooltip ) {
return $tooltip( 'popoverHtml', 'popover', 'click' );
}])
You will need the template too of course:
您当然也需要模板：
angular.module("template/popover/popover-html.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/popover/popover-html.html",
"<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
" <div class=\"arrow\"></div>\n" +
"\n" +
" <div class=\"popover-inner\">\n" +
" <h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>\n" +
" <div class=\"popover-content\" ng-bind-html=\"content\"> </div>\n" +
" </div>\n" +
"</div>\n" +
"");
}]);
And then use it like so:
然后像这样使用它：
<i title="View More Info" class="icon-info-sign"
data-popover-html="varWithHtml"
data-popover-title="More Info">
</i>
回答by Chi Row
ui-bootstrap popover does support HTML template which can contain ng-click.
ui-bootstrap popover 确实支持可以包含 ng-click 的 HTML 模板。
Replace the default template with the attribute
用属性替换默认模板
popover-template="nameOfYourTemplate.html"
