再次更新

Question

我目前正在使用Angular-ui的部分编写AngularJS webapp - 特别是UI-Bootstrap

我希望能够在应用获取数据时显示加载对话框。在初始加载时，我也打算不在对话框后面显示任何内容。

我尝试了以下操作并且对话框成功打开，但是在加载数据时它不会关闭。

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>

从阅读各种页面我相信我应该将关闭功能放入对话控制器，但那我该怎么称呼呢？

非常感谢有关如何实现这一点的任何其他建议。

谢谢你提前!!

修改

为了更清楚，我遇到的问题是函数removeDialog（）不会从屏幕上删除对话框。

Answer 1

再次更新

看起来如果为对话框创建一个单独的控制器，然后在该控制器中加载数据，您应该能够实现所需的效果。下面的Plunker展示了它是如何工作的，

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);
 }

如何在处理$ http请求时实现加载对话框

1 个答案:

再次更新