当我尝试在按钮上打开弹出窗口时,它在第一次单击时未打开。 我使用带有Angular js的J Query在按钮点击时打开右侧弹出窗口,但是我遇到打开它的问题。按钮点击事件我写了这段代码。
当我点击此按钮<a type="button" class="btn border-button cd-btn" ng-click="Bookservice(item)">Book</a>
$scope.Bookservice=function(item)
{
$('.cd-btn').on('click', function(event){
event.preventDefault();
$('.cd-panel').addClass('is-visible');
});
//clode the lateral panel
$('.cd-panel').on('click', function(event){
if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) {
$('.cd-panel').removeClass('is-visible');
event.preventDefault();
}
});
}
和弹出代码类似
<div class="cd-panel from-right">
<a href="#0" class="cd-panel-close">Close</a>
<div class="cd-panel-container">
<div class="cd-panel-content">
从这段代码我尝试打开弹出窗口,当我点击按钮时,它使用我以前编写的代码,但是当我第二次点击按钮时,它在第一次点击时没有打开,打开弹出窗口。所以,我希望我的弹出窗口必须在页面加载后第一次打开时打开。
谢谢
答案 0 :(得分:1)
$scope.Bookservice=function(item)
{
$('.cd-btn').on('click', function(event){
event.preventDefault();
if(!$(this).hasClass("is-visible"))
$('.cd-panel').addClass('is-visible');
else
$('.cd-panel').removeClass('is-visible');
});
//clode the lateral panel
}
并在您的视图中使用ng-click
答案 1 :(得分:1)
您在调用Bookservice(item)
时附加点击事件。
将$('.cd-panel').addClass('is-visible');
放入Bookservice函数中。
$scope.Bookservice=function(item)
{
$('.cd-panel').addClass('is-visible');
//clode the lateral panel
$('.cd-panel').on('click', function(event){
if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) {
$('.cd-panel').removeClass('is-visible');
event.preventDefault();
}
});
}
答案 2 :(得分:0)
与DOM操作相关的逻辑不应该写在控制器的$ scope函数中,我想你是这样做的,请创建指令来显示弹出并实现DOM操作的逻辑,这个链接Open custom Pop up in Angular有适合您的问题的实施方法