jqueryをロードするために初めてダブルクリックする必要があるのはなぜですか？

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"> 

のようなものをクリックして、私はそれが以前使用して、その時点でボタンをクリックすると、ポップアップを開こう私が書いたコードですが、その時にボタンを2回目にクリックすると最初のクリックでは開きません。だから、私はポップアップがページの読み込み後の最初のクリックで開く必要があります。

おかげ

Answer 1

Bookservice(item)が呼び出されたときは、クリックイベントを装着しています。

$('.cd-panel').addClass('is-visible');をブックサービス機能に入れます。

$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 2

$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クリックあなたのビューで

Answer 3

DOM操作に関連するロジックは、コントローラの$スコープ機能で書かれるべきではない、私はあなたがそうしていると思いますが、ポップアップを表示し、そこにDOM操作のためのロジックを実装するディレクティブを作成してください、このリンクOpen custom Pop up in Angularはあり問題の適切な実装方法