使用引导酥料饼的内侧角 [英] Using Angular inside of a bootstrap popover
问题描述
我试图创建一个具有NG重复,使行的引导酥料饼里面的一张桌子,但它似乎像角失败,我不知道为什么。
I'm trying to create a table inside a Bootstrap popover that has an ng-repeat to make the rows but it seems like the angular is failing and I'm not sure why.
HTML
<a id="showDays"
type="button"
class="btn btn-success btn-xs pull-right"
data-toggle="popover"
data-placement="left"
data-html="true"
title="Popover title"
data-content=
'<table class="table table-condensed">
<tbody>
<tr ng-repeat="d in days">
<td>{{d}}</td>
</tr>
</tbody>
</table>'>
<i class="fa fa-clock-o fa-lg"></i>
</a>
<script type="text/javascript" >
$('#showDays').popover();
</script>
控制器:
$scope.days = [
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday'
];
其结果是,该酥料饼主体具有一列是空的。任何帮助是AP preciated。谢谢!
The result is that the popover body has one row that is empty. Any help is appreciated. Thank you!
推荐答案
好像可能是你要实现的目标是不是在角版本尚不支持什么,而是可以创建自己的指令,做这样的事情; -
Seems like probably what you are trying to achieve is not yet supported in angular version, you can instead create a directive of your own and do something like this;-
.directive('popover', function($compile, $timeout){
return {
restrict: 'A',
link:function(scope, el, attrs){
var content = attrs.content; //get the template from the attribute
var elm = angular.element('<div />'); //create a temporary element
elm.append(attrs.content); //append the content
$compile(elm)(scope); //compile
$timeout(function() { //Once That is rendered
el.removeAttr('popover').attr('data-content',elm.html()); //Update the attribute
el.popover(); //set up popover
});
}
}
})
和在你的酥料饼添加HTML指令属性酥料饼
: -
and in your popover html add the directive attribute popover
:-
<a popover id="showDays"
type="button"
class="btn btn-success btn-xs pull-left"
data-toggle="popover"
data-placement="right"
data-html="true"
title="Popover title"
data-content=
'<table class="table table-condensed">
<tbody>
<tr ng-repeat="d in days">
<td ng-bind="d"></td>
</tr>
</tbody>
</table>'>
<i class="fa fa-clock-o fa-lg">Click me</i>
</a>
Demo
使这一点的配置,通过设置, 演示 -
Making it bit more configurable, pass the settings, Demo:-
这篇关于使用引导酥料饼的内侧角的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!