Question

当我尝试在按钮上打开弹出窗口时，它在第一次单击时未打开。我使用带有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">

从这段代码我尝试打开弹出窗口，当我点击按钮时，它使用我以前编写的代码，但是当我第二次点击按钮时，它在第一次点击时没有打开，打开弹出窗口。所以，我希望我的弹出窗口必须在页面加载后第一次打开时打开。

谢谢

Answer 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

Answer 2

您在调用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();
      }
   });
}

Answer 3

与DOM操作相关的逻辑不应该写在控制器的$ scope函数中，我想你是这样做的，请创建指令来显示弹出并实现DOM操作的逻辑，这个链接Open custom Pop up in Angular有适合您的问题的实施方法

为什么需要双击第一次加载jquery？

3 个答案: