1

我目前正在使用 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() 不会从屏幕上删除对话框。

4

1 回答 1

3

再次更新

看起来如果您为对话框创建一个单独的控制器，然后在该控制器中加载数据，您应该能够实现所需的效果。下面的 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);
 }
于 2013-08-01T16:39:11.240 回答