我正试图在AngularJS ngRepeat指令中使用Bootstrap Popover。问题是没有对标题属性进行插值。如何解决此问题?
查看
<div ng-app="app" id="ng-app">
<ul ng-controller="Main">
<li ng-repeat="i in items" data-toggle="popover" title="{{ i.title }}" <!-- Title isn't interpolated so Popover doesn't render a title -->
data-content="Events: {{ day.events.length }}"
init-popover>{{ i.data }}</li>
</ul>
代码
var app = angular.module('app', []);
app.controller('Main', ['$scope', function($scope){
$scope.items = [
{ title: 'Title 1', data: 'lorem' },
{ title: 'Title 2', data: 'ipsum' },
];
}]);
app.directive('initPopover', function() {
return function(scope, element, attrs) {
if (scope.$last){
$('[data-toggle="popover"]').popover({container: 'ul'});
}
};
});
FIDDLE
你可以让它工作,但它很难看,这是我的解决方案
var app = angular.module('app', []);
app.controller('Main', ['$scope', function($scope){
$scope.items = [
{ title: 'Title 1', data: 'Test in ngRepeat' },
{ title: 'Title 2', data: 'Test in ngRepeat' },
];
}]);
app.directive('initPopover', function() {
return function(scope, element, attrs) {
if (scope.$last) {
attrs.$observe('title', function () {
$('[data-toggle="popover"]').popover({container: 'ul'});
});
}
};
});
您不应该使用title="{{i.title}}"
,但ng-attr-title="{{i.title}}"
。。。
我也遇到了同样的问题。我使用的是bootstrap v3.3.6和Angular v1.5.0
添加属性数据original title="{{someTitle}}"解决了此问题。
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="{{someTitle}}" data-original-title="{{someTitle}}" data-content="Some Content">Click to toggle popover</button>
此外,根据引导程序的要求,在指令中调用.popover()
module.directive('myDir', ['jQuery', function (jQuery) {
return {
link: function () {
jQuery('[data-toggle="popover"]').popover();
}
};
}]);
将$timeout
添加到指令将解决您的问题。$timeout将在ng的最后一个元素在UI&运行CCD_ 4循环。
指令
app.directive('initPopover', function($timeout) {
return function(scope, element, attrs) {
if (scope.$last) {
$timeout(function() {
angular.element('[data-toggle="popover"]').popover({
container: 'ul'
});
});
}
};
});
工作Fiddle
希望这能对你有所帮助。谢谢
考虑将ui引导程序用于原生Angular指令,而不是bootstrap的jQuery版本。在Angular项目中使用它们要容易得多。
编辑:如果你做不到,这里有一个解决方案:
<li ng-repeat="i in items" data-toggle="popover" data-ng-attr-popover_title="{{ i.title }}"
data-content="Popover Content"
init-popover>{{ i.data }}</li>
对指令做了一个小改动:
app.directive('initPopover', function() {
return function(scope, element, attrs) {
if (scope.$last){
$('[data-toggle="popover"]').popover({ container: 'ul', title: attrs.popoverTitle });
}
};
ng-attr-popup_title
将在元素上创建一个名为popupTitle
的HTML属性,并正确解析{{}}
中的Angular语法。然后,在指令中,我们可以检查该属性来设置popover标题。
Fiddle:此处
只是添加到这里的知识库中。这是棱角分明的方式,以防有人需要。我的解决方案基于Mark Coleman的PopOver教程,当然还有Nate Barbettini的贡献。
我的情况是,我在项目中的项目上有一个嵌套的ng重复,所以我需要有一个基于存储在范围中的数组的弹出窗口的标题,而弹出窗口的内容来自存储在范围的数组中的另一个数组。
我在HTML元素中添加了ng-attr-title
,如下所示:
<div pop-over items='week.items' ng-attr-title="{{'Week number:'+ week.week}}"> Total sales this week : {{week.sales}}</div>
然后,在我的指示中,我主要遵循了马克·科尔曼的做法。
angular.module('vegadirectives', [])
.directive('popOver', function ($compile, $templateCache) {
var itemsTemplate = "<ul class='popper'><li ng-repeat='thing in items track by $index'>";
itemsTemplate+=" <i class='fa fa-square' ng-class=";
itemsTemplate+="{purple:thing.color==='purple','orange':thing.color==='orange','white':thing.color==='white','pink':thing.color==='pink','red':thing.color==='red','green':thing.color==='green','yellow':thing.color==='yellow'}";
itemsTemplate+="></i> {{thing.model}} - {{thing.qty}}</li></ul>";
var getTemplate = function () {
var template=itemsTemplate;
return template;
}
return {
restrict: "A",
transclude: true,
template: "<span ng-transclude></span>",
link: function (scope, element, attrs) {
var popOverContent;
if (scope.items) {
var html = getTemplate();
popOverContent = $compile(html)(scope);
var options = {
trigger:'click',
content: popOverContent,
placement: "right",
html: true,
title:scope.title
};
if (scope.$last) {
}
$(element).popover(options);
}
},
scope: {
items: '=',
title:'@'
}
};
});
说明:
为了用项目列表填充我的popover,并用一些花哨的颜色方块来指示不同类型的项目,我创建了一块HTML代码。$compile将使用这个名为itemsTemplate的区块来创建具有作用域的popover内容。我认为用法是$compile(htmlstring)(scope)。
接下来是popover选项设置的标准内容。对于带标题的范围插值,我指定了选项title:
和scope.title
。然后,在最后的scope:
选项中,用'='
和'@'
指定两个作用域元素。
因此,title:scope.title
引用或绑定到scope: {items:'=', title:'@' }
,而title:'@'
是HTML中标题的属性,即ng-attrs-title={{week.week}}
,其中周来自外部ng重复循环。
希望能有所帮助。
在https://stackoverflow.com/a/17864868/2379762,我尝试了data original title={{I.title}},它有效。
http://jsfiddle.net/f1tjj8x5/
<li ng-repeat="i in items" data-toggle="popover" data-original-title="{{ i.title }}"
data-content="Popover Content"
init-popover>{{ i.data }}</li>