我创建了一个使用引导自定义popover的指令.这可以从用户输入一个组名称,它有两个按钮,用于应用该值进行建模,并在工具提示上显示该值,并显示一个按钮来关闭popover.
我正在使用popover java脚本事件,问题是单个popover是完美的,但当我打开另一个这个popover不关闭自己.一个人打开时需要帮助关闭其他的popovers.
这是 plnk显示的指令.
我正在使用popover java脚本事件,问题是单个popover是完美的,但当我打开另一个这个popover不关闭自己.一个人打开时需要帮助关闭其他的popovers.
这是 plnk显示的指令.
这是代码
var app = angular.module('myApp',[]);
app.directive('customEditPopover',function () {
return {
restrict: 'A',template: '<span><i class="fa fa-tags" aria-hidden="true"></i></span>',scope: {
'myModel': '=',},link: function (scope,el,attrs) {
scope.label = attrs.popoverLabel;
var btnsave = '#' + attrs.popoverSave;
var btncancel = '#' + attrs.popoverCancel;
var index = attrs.index;
$(el).tooltip({
title: '' + (scope.myModel == undefined) ? "" : scope.myModel,container: 'body',placement: 'top'
});
$(el).popover({
trigger: 'click',html: true,content: attrs.popoverHtml,placement: attrs.popoverPlacement,container: 'body'
})
.on('inserted.bs.popover',function (e) {
bindevents();
$('#popovertext' + index).val(scope.myModel);
}).on('hidden.bs.popover',function () {
Unbindevents();
});
function bindevents() {
$(btnsave).bind('click',function () {
var text = $('#popovertext' + index).val();
scope.myModel = text;
$(el).tooltip('hide')
.attr('data-original-title',text)
.tooltip('fixTitle')
toggle();
});
$(btncancel).bind('click',function () {
toggle();
});
}
function Unbindevents() {
$(btnsave).unbind('click');
$(btncancel).unbind('click');
}
function toggle() {
$(el).popover('hide');
$(el).click();
}
}
};
});
app.controller('MyController',['$scope',function($scope){
$scope.list=[
{
name:'ABC'
},{
name:'DEF'
},{
name:'GHI'
},{
name:'KLM'
}
];
}]);
需要帮助关闭其他popover同时打开下一个.
解决方法
当触发show.bs.popover时,可以关闭其他popovers,如下所示：
Updated Plunkr
$(el).popover({
trigger: 'click',container: 'body'
})
.on('show.bs.popover',function () {
var siblings = $(el).parent().parent().siblings();
siblings.each(function (each){
$(siblings[each]).find('span').popover('hide');
});
});
