Wie die Umsetzung der laden-dialog, während sich mit $http-request

Ich bin derzeit am schreiben einer AngularJS webapp, indem er Teile von Angular-ui - insbesondere UI-Bootstrap

Ich würde gerne in der Lage, zum anzeigen einer loading-dialog, während die app bekommt Ihre Daten. Beim erstmaligen laden außerdem habe ich die Absicht, nicht zu zeigen, alles, was hinter dem dialog.

Habe ich versucht, die folgenden und es öffnet sich der dialog erfolgreich, aber es lässt sich nicht schließen, wenn die Daten geladen hat.

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>

Vom Lesen von verschiedenen Seiten, ich glaube, ich soll zu setzen, die schließen-Funktion in einen Dialog-Controller, aber dann, wie soll ich es nennen?

Irgendwelche anderen Vorschläge, wie dies umzusetzen wird sehr geschätzt.

Dank Voraus!!

BEARBEITEN

Deutlicher machen, das Problem, das ich habe ist, dass die Funktion removeDialog() entfernt nicht der dialog vom Bildschirm.

InformationsquelleAutor Josh | 2013-08-01

  1. 3

    Wieder Aktualisiert

    Sieht es aus, wenn Sie erstellen eine separate Steuerung für den dialog und laden Sie dann die Daten in den controller-Sie sollten in der Lage sein, um die gewünschten Auswirkungen. Die Plunker unten zeigt, wie dies funktionieren könnte,

    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);
 }
    Danke für die schnelle Antwort, die Jonathan und ich werden wahrscheinlich Ihre Methode, aber das Problem ist, dass die Funktion removeDialog() nicht funktioniert. Habe ich am Ende der Seite geladen und angezeigt, aber der dialog ist nicht vom Bildschirm entfernt.
    Überprüfen Sie bitte mein update für die Antwort, ich würde vorschlagen, versuchen $dialog.close(); in Ihrem removeDialog Funktion. Ich glaube, ich lief in das gleiche problem anfangs, wenn die Verwendung des $dialog-service.
    Habe gerade versucht, und ich bin immer in der Konsole der Fehler: "$dialog.close() ist keine Funktion" ??
    bitte überprüfen Sie die aktualisierte Antwort.
    Hatte gerade einen Blick auf diese und erstellt werden: plnkr.co/Bearbeiten/xyrWqkxryyLuOsIOLAT5?p=Album Vorhören ich bin mit $timeout simulieren die Anforderung verzögern, aber ti sollte um den job. Das Problem ist die .dann die Funktion in einem Dialogfenster wird nur dann ausgeführt, wenn der dialog geschlossen ist, so weit ich erzählen kann. So können wir nicht setzen Sie die Funktion, um es zu schließen.

    InformationsquelleAutor Jonathan Palumbo

Schreibe einen Kommentar