4

以下を作成したいと思います。クリックすると Angular Bootstrap[1 からダイアログ/モーダルを開くボタンがあり、アプリがサーバーから json データをフェッチしている間に読み込みインジケーターが表示され、そのデータがダイアログのコンテンツに表示されます。

たとえば、jsonデータの解析コード、つまりリストとして表示するためのng-repeatを含むダイアログテンプレートを作成することを考えています。

私は不明です：

  1. プロセスのどこに負荷インジケーターを追加しますか (spin.js としましょう)。私が想定しているコントローラーからダイアログテンプレート内のいくつかの div を参照できるようにしたいですか?
  2. どの時点で ajax 呼び出しを行うか
  3. そのデータをテンプレートに渡して解析する方法
4

2 に答える 2

5

テンプレートをダイアログに手動でロードする必要はありません。$dialogAngularUIのサービスは、静的テンプレートまたはテンプレート URL の両方を受け入れます。その URL は何でも返すことができますGET。AJAX 呼び出しを介して要求を実行し、返されたデータをダイアログに入力するだけです。そのリクエストはローカルにキャッシュされるため、次の呼び出しは最初の呼び出しよりも高速になるはずです。

開始するための簡単なスニペットを次に示します。

Javascript

angular.module('app', ['ui.bootstrap.dialog'])
    .controller('Ctrl', function($scope, $dialog, $window) {
        $scope.open = function() {
            var options = {
                backdrop: true,
                keyboard: true,                    
                controller: 'DialogCtrl', // the dialog object will be inject 
                                          // into it
                templateUrl: 'path/to/view' // can be either a static file or 
                                            // a service that returns some data
            };
            var dialog = $dialog.dialog(options);
            dialog.open().then(function(result) {
                if (result === 0) {
                    $window.alert("Cancel pressed");
                }
                else if (result === 1) {
                    $window.alert("OK pressed");
                }
            });
        };
    })
    .controller('DialogCtrl', function($scope, $http, dialog) {
        // Here you can put whatever behavior the dialog might have
        $scope.close = function(result) {
            dialog.close(result);
        };

        // Loads some data into the dialog scope
        $http.get('/path/to/service')
            .success(function(response) {
                $scope.items = response;
            });
    });

メイン HTML

<div ng-app="app" ng-controller="Ctrl">
  <button ng-click="open()">Open dialog</button>
</div>

HTML を表示

<div class="modal-header">
  <h3>Title</h3>
</div>
<div class="modal-body">
  <!-- Renders the data loaded by the controller -->
  <p ng-repeat="item in items">{{ item }}</p>
</div>
<div class="modal-footer">
  <button class="btn" ng-click="close(0)">Cancel</button>
  <button class="btn btn-primary" ng-click="close(1)">OK</button>
</div>

このPlunker スクリプトは、上記のすべてを示しています。

更新: ダイアログ ボックスの内容を動的に変更する方法を示すために、サンプル コードを更新しました。

于 2013-08-11T06:10:22.007 に答える
0

"modal は $dialog サービスを再利用して、部分的なビューやコントローラーを作成する手間をかけずに、既に DOM にあるモーダルを簡単に作成できるようにするディレクティブです。

ディレクティブは $dialog グローバル オプションを共有します。"

以下のブートストラップ ダイアログ オプションを確認してください。URL は次のとおりです。

http://angular-ui.github.io/bootstrap/#/dialog

于 2013-08-11T06:11:49.027 に答える