1

現在、Angular-ui の一部 (特に UI-Bootstrap) を使用して AngularJS webapp を作成しています。

アプリがデータを取得している間、読み込みダイアログを表示できるようにしたいと考えています。初期ロードでは、ダイアログの背後に何も表示しないつもりです。

次のことを試みましたが、ダイアログは正常に開きますが、データがロードされても閉じません。

JS:

angular.module('MyApp', [ui.bootstrap])
.controller ('AppCtrl', function ($scope, $http, $dialog) {
    $scope.initalized = false;
    $scope.opts = {dialogFade:false};

    $scope.data = [];

    var loadDialog = $dialog.dialog($scope.opts);

    $scope.loadData = function() {
        loadDialog.open('template.html').then(function() {
            // When the dialog is closed show the page content
            $scope.initialized = true;
        });

        $http.get('my/url').then(function(result) {
            $scope.data = result.data;
            $scope.removeDialog();
        });
    };

    $scope.removeDialog = function() {
        loadDialog.close();
    };
});

HTML:

<html ng-app="MyApp">
    <head>...</head>
    <body>
        <div ng-show="initialized" ng-init="loadData() ng-controller="AppCtrl">
            ...
        </div>
    </body>
</html>

さまざまなページを読んだことから、close 関数をダイアログ コントローラーに入れることになっていると思いますが、それをどのように呼び出すのでしょうか?

これを実装する方法に関する他の提案は大歓迎です。

ありがとうございます！

編集

より明確にするために、私が抱えている問題は、関数 removeDialog() が画面からダイアログを削除しないことです。

4

1 に答える 1

3

再更新

ダイアログ用に別のコントローラーを作成し、そのコントローラー内にデータをロードすると、目的の効果を達成できるはずです。以下のプランカーは、これがどのように機能するかを示しています。

http://plnkr.co/edit/T5z1hj?p=preview

angular.module('plunker', ['ui.bootstrap']);
function DialogDemoCtrl($scope, $dialog){

   // Inlined template for demo
   var t = '<div class="modal-header">'+
           '<h3>Loading</h3>'+
           '</div>';

   $scope.opts = {
     backdrop: true,
     keyboard: true,
     backdropClick: true,
     controller: "TestDialogController",
     template:  t, // OR: templateUrl: 'path/to/view.html'
   };

   $scope.initialized = false;

   $dialog.dialog($scope.opts).open()
      .then(function(result) {
          $scope.initialized = result.isInitialized;
          $scope.data = result.data;
      });
 }

 function TestDialogController($scope, $timeout, dialog){
    //simulate $http get
    $timeout(function() {
       var httpGetData = [1, 2, 3, 4];
       dialog.close({ isInitialized: true, data: httpGetData });
    }, 3000);
 }
于 2013-08-01T16:39:11.240 に答える