我目前正在寫採用了棱角分明的UI部分的AngularJS web應用程序 - 尤其是用戶界面，引導

我想能夠顯示加載對話框，而應用程序獲取其數據。在初始加載時，我也不打算在對話框後面顯示任何內容。

我已經嘗試了以下操作，並且對話框成功打開，但是在數據加載完成後它不會關閉。

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（）不從屏幕上刪除對話框。

來源

2013-08-01 Josh

再次

看起來，如果你爲對話框創建一個單獨的控制器，然後加載控制器裏面的數據，你應該能夠達到預期的影響像更新。下面的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-01 16:39:11

感謝您的快速反應喬納森和我可能會在這裏用你的方法，但問題是，功能removeDialog（）不工作。我最終加載並顯示了頁面，但不會從屏幕上刪除該對話框。 – Josh

請檢查我的更新到答案，我會建議在你的removeDialog函數中嘗試'$ dialog.close（）;'。我相信我最初在使用$ dialog服務時遇到了同樣的問題。 –

剛試過，我得到一個控制檯錯誤：「$ dialog.close（）不是一個函數」?? – Josh

如何實現負載對話，同時處理$ HTTP請求

回答

再次

如何實現負載對話，同時處理$ HTTP請求

回答

再次

相關問題