ビューの変更までFirebase機能が実行されない

Question

私は、角度コントローラの中にFirebase機能を持っています。

{ 
    selected-option : input-value 
} 

これは完璧に動作しますが、ビューが変更されたときにのみ動作します：クリックした際には、選択したオプションとタイプ入力を受け取り、そのようなユーザーのオブジェクトにそれらを保存することをボタンがあります。私の場合、両方の航空会社は既にデータを持っているので、この関数は$ ionicPopupを表示します。 ビューが一度変更された後、機能は完全に完璧です。これは明らかに問題であり、$ applyまたは$ digestの問題であると仮定します。

は、ここに私のコントローラのコード（「RIGHT HERE ISSUE」でマークSupected場所）である：助けを

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

    } 
    } 
    }]) 

おかげで、必要であれば、私はより多くのコードやスクリーンショットを提供することができます。

Answer 1

問題は、コードのこの部分である：あなたがonce()を呼び出すと

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

、それはFirebaseからのデータのロードを開始します。これには時間がかかることがあるので、データが利用可能なときに呼び出されるコールバック関数を渡します。しかし、コールバック関数が呼び出される頃には、AngularJSは$scopeへの更新をもう期待していません。

ソリューションはAngularJSは、スコープが再び変化し処理する準備ができたときにそれが実行されますが保証され、$timeout()にコードをラップすることです：あなたはAngularFireの$firebaseObject()を使用している場合、この問題は起こらないだろうと

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

注意および$firebaseArray()プリミティブは、AngularJSにスコープの変更を自動的に通知するためです。

多くの場合、となります。最近は次のようなものがあります：Taking long to load