Firebase-Funktion läuft nicht bis Ansicht ändern

Question

Ich habe eine Firebase-Funktion in einem Winkel-Controller. Es gibt einen Knopf, der, wenn die gewählte Option und die Art Eingabe und speichert sie in das Objekt des Benutzers geklickt nimmt etwa so:

{ 
    selected-option : input-value 
} 

Das funktioniert perfekt, aber nur funktioniert, wenn die Ansicht geändert wird. In meinem Fall haben beide Fluggesellschaften bereits Daten, daher zeigt diese Funktion ein $ ionicPopup an. Nachdem sich die Ansicht einmal geändert hat ist die Funktionalität absolut perfekt. Dies ist offensichtlich ein Problem und ich nehme an, dass es sich um ein $ apply oder $ digest Problem handelt.

Hier ist mein Controller-Code (Supected Standort von der Aufschrift "AUSGABE RIGHT HERE"):

.controller('ProgramCtrl', ['$scope', '$state', '$firebaseArray', 'facebook', '$ionicPopup', '$ionicLoading', 
function($scope, $state, $firebaseArray, facebook, $ionicPopup, $ionicLoading) { 
$scope.goBack = function() { 
    $state.go('app.home'); 
} 

$scope.show = function() { 
    $ionicLoading.show({ 
     template: 'Loading...' 
    }); 
}; 
$scope.hide = function(){ 
    $ionicLoading.hide(); 
}; 

// Get who is logged in 
$scope.user = facebook.get(); 

// Array of airlines 
var airRef = ref.child("airlines"); 
$scope.airlines = $firebaseArray(airRef); 
$scope.selectedAir = {}; 
$scope.miles = {}; 

$scope.revealInput = function(num) { 
    // Jquery variables 
    $milesPoints = $(".milesPoints"); 
    $saveTicket = $(".saveTicket"); 
    // Will fade in visibility depending on num passed into function 
    switch(num) { 
     case 1: 
      $saveTicket.prop("disabled", false); 
      $saveTicket.fadeTo(400, 1); 
      break; 
     default: 
      break; 
    } 
} 

// Add program to user 
$scope.addProgram = function() { 
    // Connect to Firebase 
    Firebase.goOnline(); 
    // Check for facebook user 
    if(jQuery.isEmptyObject($scope.user)) { 
     // Get Firebase user 
     var authData = ref.getAuth(); 
     var theUser = ref.child("users").child(authData.uid); 
     var selected = {}; 
     // Access user miles data 
     // $scope.show(); 
     // ISSUE RIGHT HERE  
    theUser.child("miles").child($scope.selectedAir.name.$id).once("value", function(snapshot) { 
      // Update scopes 
       var exist = snapshot.exists(); 
       // Check if object id exists, if so notify user 
       if(!exist) { 
        // Save and update program to user object 
        selected[$scope.selectedAir.name.$id] = $scope.miles.num; 
        theUser.child("miles").update(selected); 
        //$scope.hide(); 
        $state.go("app.saved"); 
       } else { 
        // Popup alert 
        var alertPopup = $ionicPopup.alert({ 
        title: 'Oops!', 
        template: "You already created this airline! Go to the 'Add Ticket' page to add more points." 
        }); 
        alertPopup.then(function(res) { 
        console.log("You already created this airline! Go to the 'Add Ticket' page to add more points."); 
        }); 
       } 
     }) 

    } else { 
     var theUser = ref.child("users").child($scope.user.id); 
     var selected = {}; 
     $scope.show(); 
     theUser.child("miles").child($scope.selectedAir.name.$id).once("value", function(snapshot) { 
      var exist = snapshot.exists(); 
      if(!exist) { 
       selected[$scope.selectedAir.name.$id] = $scope.miles.num; 
       theUser.child("miles").update(selected); 
       $scope.hide(); 
       $state.go("app.saved"); 
      } else { 
       var alertPopup = $ionicPopup.alert({ 
       title: 'Oops!', 
       template: "You already created this airline! Go to the 'Add Ticket' page to add more points." 
       }); 
       alertPopup.then(function(res) { 
       console.log("You already created this airline! Go to the 'Add Ticket' page to add more points."); 
       }); 
      } 
     }) 

    } 
    } 
    }]) 

Danke für die Hilfe, und ich kann mehr Code oder Screenshots zur Verfügung stellen, wenn nötig.

Answer 1

Das Problem ist in diesem Stück Code:

theUser.child("miles").child($scope.selectedAir.name.$id).once("value", function(snapshot) { 
    $timout(function() { 
      var exist = snapshot.exists(); 
      // Check if object id exists, if so notify user 
      if(!exist) { 
       // Save and update program to user object 
       selected[$scope.selectedAir.name.$id] = $scope.miles.num; 
       theUser.child("miles").update(selected); 
       //$scope.hide(); 
       $state.go("app.saved"); 
      } else { 
       // Popup alert 
       var alertPopup = $ionicPopup.alert({ 
       title: 'Oops!', 
       template: "You already created this airline! Go to the 'Add Ticket' page to add more points." 
       }); 
       alertPopup.then(function(res) { 
       console.log("You already created this airline! Go to the 'Add Ticket' page to add more points."); 
       }); 
      } 
    }); 
}) 

Wenn Sie once() nennen, es beginnt Laden von Daten aus Firebase. Da dies einige Zeit dauern kann, übergeben Sie eine Rückruffunktion, die aufgerufen wird, wenn die Daten verfügbar sind. Zu dem Zeitpunkt, zu dem die Callback-Funktion aufgerufen wird, erwartet AngularJS jedoch keine Updates für die $scope.

Die Lösung ist den Code in ein $timeout() zu wickeln, die es gewährleistet, ausgeführt wird, wenn AngularJS bereit ist, Umfang zu behandeln wieder ändert:

theUser.child("miles").child($scope.selectedAir.name.$id).once("value", function(snapshot) { 
     // Update scopes 
      var exist = snapshot.exists(); 
      // Check if object id exists, if so notify user 
      if(!exist) { 
       // Save and update program to user object 
       selected[$scope.selectedAir.name.$id] = $scope.miles.num; 
       theUser.child("miles").update(selected); 
       //$scope.hide(); 
       $state.go("app.saved"); 
      } else { 
       // Popup alert 
       var alertPopup = $ionicPopup.alert({ 
       title: 'Oops!', 
       template: "You already created this airline! Go to the 'Add Ticket' page to add more points." 
       }); 
       alertPopup.then(function(res) { 
       console.log("You already created this airline! Go to the 'Add Ticket' page to add more points."); 
       }); 
      } 
    }) 

Beachten Sie, dass dieses Problem nicht passieren würde, wenn Sie AngularFire die verwendet $firebaseObject() und $firebaseArray() Grundelemente, da diese AngularJS automatisch Änderungen des Umfangs mitteilen.

Wir bekommen diese Frage viel. Hier ist eine aktuelle: Taking long to load