[英]AngularJS bootstrap popover custom directive
I have created a directive using bootstrap custom popover. 我使用bootstrap自定义弹出窗口创建了一个指令。 That works taking an input from a user for a group name and it has two buttons for apply that value to model and show that value on tooltip and a button to close the popover. 这样可以从用户那里获取组名称的输入,并且有两个按钮用于将该值应用于建模并在工具提示上显示该值以及用于关闭弹出窗口的按钮。 I am using popover java script events , Problem is that single popover works perfectly but when I open another one this popover not closing itself. 我正在使用popover java脚本事件,问题是单个popover工作正常,但是当我打开另一个时,这个popover不关闭自己。 Need help in closing other popovers while one is open. 当一个人打开时,需要帮助关闭其他popovers。 Here is the plnk showing the directive. 这是显示指令的plnk 。
Here is the code 这是代码
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'
}
];
}]);
Need help closing other popover while opening next one. 在打开下一个popover时需要帮助关闭其他popover。
You can close the other popovers when show.bs.popover
is triggered as shown below : Updated Plunkr 当触发show.bs.popover时,您可以关闭其他弹出show.bs.popover
,如下所示: 更新了Plunkr
$(el).popover({
trigger: 'click',
html: true,
content: attrs.popoverHtml,
placement: attrs.popoverPlacement,
container: 'body'
})
.on('show.bs.popover', function () {
var siblings = $(el).parent().parent().siblings();
siblings.each(function (each){
$(siblings[each]).find('span').popover('hide');
});
});
IMO, the most modular way would be to use a service to track all opened PopUps. IMO,最模块化的方式是使用服务来跟踪所有打开的PopUps。
This gives multiple benefits. 这带来了多种好处。
You can extend the service to track different types of popups, allowing you to close all or open all or do whatever you need 您可以扩展服务以跟踪不同类型的弹出窗口,允许您关闭所有或打开所有或执行任何您需要的操作
It removes the logic from the controls and directives on keeping track of popups. 它从控件和指令中删除了跟踪弹出窗口的逻辑。 Thus they can focus on 1 specific thing. 因此,他们可以专注于一个特定的事情。 You can also run multiple controllers and popups on a page allowing each controller/popup to be a discrete unit of work and not needing to worry about other controllers/popups stomping on their items. 您还可以在页面上运行多个控制器和弹出窗口,允许每个控制器/弹出窗口是一个独立的工作单元,而不必担心其他控制器/弹出窗口踩踏它们的项目。
The cons of doing this 这样做的缺点
ng-bootstrap
directives. 您可以使用我使用的相同服务方法,只需将其插入ng-bootstrap
指令即可。 JQUERY
events seems to become unresponsive when you click 8+ times. 单击8次以上时,绑定/取消绑定JQUERY
事件似乎没有响应。 I do not have an answer for why that is, but the overall idea of using a service to keep track is still a valid one. 我没有答案为什么会这样,但使用服务跟踪的整体想法仍然是有效的。 You shoudl be able to cut and paste this code into the plnkr or your dev box and it will work. 您可以将此代码剪切并粘贴到plnkr或开发框中,它将起作用。
// Code goes here
var app = angular.module('myApp',[]);
app.factory('popUpService', function() {
var activePopups = [];
// factory function body that constructs shinyNewServiceInstance
return {
AddPopup : function(el)
{
activePopups.push(el);
},
CloseAllPopups : function(closeFunction){
for (var i = 0; i < activePopups.length; i++)
{
closeFunction(activePopups[i])
}
}
}
});
app.directive('customEditPopover',['popUpService', function (popUpService) {
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() {
CloseAll();
popUpService.AddPopup($(el));
$(btnsave).bind('click', function () {
var text = $('#popovertext' + index).val();
scope.myModel = text;
$(el).tooltip('hide')
.attr('data-original-title', text)
.tooltip('fixTitle')
closeCurrent();
});
$(btncancel).bind('click', function () {
closeCurrent();
});
}
function Unbindevents() {
$(btnsave).unbind('click');
$(btncancel).unbind('click');
}
function closeCurrent(){
$(el).popover('hide');
// $(el).click();
}
function CloseAll() {
popUpService.CloseAllPopups(function(popup){
popup.popover('hide');
// popup.click();
});
}
}
}
}]);
app.controller('MyController',['$scope',function($scope){
$scope.list=[
{
name:'ABC'
},
{
name:'DEF'
},
{
name:'GHI'
},
{
name:'KLM'
}
];
}]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.