2016-08-22 3 views
1

私は角度jsとbootsrapでサイトを開発しています。Angular Js + bootsrapを使ってポップアップを設定するには?

サイトがロードされるときに、サーバーコールを実行してデータを取得しています。このプロセスには時間がかかりました。この時間間隔で、私は待っているメッセージでポップアップを表示したい。

しかし、私はここで自分のセットアップでどうやって止まっていますか?実行方法でapp.jsの を実行したら、表示と非表示にポップアップコールを追加します。

.run(["$log", "$rootScope", "$state", "dtoResource", "questionResource", function ($log, $rootScope, $state, dtoResource, questionResource) { 
        dtoResource.rc1Step1DTO() 
          .then(function (data) { 
           $rootScope.AutoQuote = data; 
           questionResource.getQuestions($rootScope.AutoQuote.postAutoQuoteObj.SessionInfo.StateCode) 
             .then(function (questions) { 
              $rootScope.questions = questions; 
              $rootScope.answers = {PC: 12345}; 
               console.log('Copy operation'); 
           angular.copy($rootScope.answers,$rootScope.default); 
           console.log($rootScope.answers); 
           console.log($rootScope.default); 
              }) 
          }) 
          .then(function() { 
           //console.log('This should be printed after the above methods are done  executing'); 
           // console.log($rootScope); 

          }) 

       }]) 
Below is plunker link 

https://plnkr.co/edit/aV65Nab9U9I6YlK2g4sY?p=preview

答えて

-1

あなたのHTMLコード内

<div id="loading" class="hidden"><p>loading</p></div> 

を追加します。サーバーは、以下を追加行う前に

$("#loading").removeClass("hidden"); 

とちょうどサーバーaddから応答を受け取った後:

$("#loading").addClass("hidden"); 
1

あなたは正しい軌道に乗っています。アプリケーションに角起動ストラップ$ uibmodalモジュールを含める必要があります。

saveメソッドの呼び出しでモーダルで開きます。以下の方法でジョブを実行します。

var instance = $modal.open(); 

インスタンスを保持し、保存の応答で適切に呼び出します。

instance.dismiss(); 

上記の情報ポップアップが閉じます。

あなたのために作成したplunkerをご覧ください。それはあなたのIPのアドバイスを得ることではなくむしろ迅速ですが、あなたのソリューションを模倣しています。

+0

ui-bootstrap-tpls-2.1.1.js、1.5.8/angular-animate.js、1.5.8/angular-sanitize.jsを使わずにポップアップを作成することはできますか? –

+0

少しオーバーヘッドだと私は同意します。アンギュラアニメーションは削除できますが、テンプレートが必要です。そしてあなたがSanitizeをまだ使用していないなら、あなたはAngleの機能を逃しています。 – Alok

+0

今のところ、私が使っているものは、私のプランナーの中にあります。 –

関連する問題