在foreach函數外部訪問$ scope Angular js Firebase

Question

這是代碼：我遍歷數據以獲取所需的值，並且得到了它。 問題是如何在控制器中的其他函數中訪問此循環之外的值。 正確的值已分配給$ scope.theModel。

var refModels = firebase.database().ref("/users/" + $scope.UserID);

refModels.once('value').then(function (snapshot) {
  snapshot.forEach(function (snapshot) {
    var usersValue = snapshot.val();
    console.log("users values", usersValue.carModel);

    $scope.theModel = usersValue.carModel;
    console.log("The model" + $scope.theModel); //output "e90"


  });
      $scope.processData();
});

因此，我需要在函數外部使用該值$ scope.theModel。 我要實現的目標是，使用$ scope.theModel-“ e90”的值，並將其與另一個數據庫引用進行比較，如果匹配，它將返回數據。 請參見另一個數據庫引用的代碼：

 $scope.processData = function (){

console.log("Process Model" + $scope.theModel); // returns undefined


$scope.carDetails = [];

firebase.database().ref("models").once('value').then(function(snapshot) {
    snapshot.forEach(function(userSnapshot) {
        var models = userSnapshot.val();
        console.log(models);


        if (models.brand == $scope.theModel){

           $scope.carDetails.push(models);
       }
   });
});

};

Answer 1

這是因為refModels.once('value').then是異步的，這意味着JS開始執行並繼續到console.log下一行，並在console.log被執行時$scope.theModel尚未填充有數據呢。

我建議您閱讀“ 異步與同步執行”，這實際上意味着什么？

您仍然可以在其他函數中訪問$scope.theModel ，但是必須確保先加載它。

編輯

refModels.once('value').then(function (snapshot) {
    snapshot.forEach(function (snapshot) {
         var usersValue = snapshot.val();
         console.log("users values", usersValue.carModel);

         $scope.theModel = usersValue.carModel;
         console.log("The model" + $scope.theModel); //output "e90"

    });
    $scope.processData();
});

$scope.processData = function() {
// here $scope.theModel exists
// do some code execution here with $scope.theModel
// call your other firebase.database.ref("models") here
};

Answer 2

好了，終於有了Bunyamin Coskuner解決方案，它起作用了，我唯一要修復的就是返回$ scope.processData;。

  var UserID = firebase.auth().currentUser.uid;

    var refModels = firebase.database().ref("/users/" +  UserID);




   refModels.once('value').then(function(snapshot) {

    console.log(snapshot)

           snapshot.forEach(function(childSnapshot) {

    console.log(childSnapshot)

           var usersValue = childSnapshot.val();

         // var theModel = usersValue.carModel;
          console.log("The model", usersValue.carModel); //output "e90"

         $scope.theModel = usersValue.carModel;
         ***return $scope.processData;*** // we have to return it here
    });

 $scope.processData();
});



$scope.processData = function (){

console.log("Process Model" + $scope.theModel); // now returns the value e90


$scope.carDetails = [];

firebase.database().ref("models").once('value').then(function(snapshot) {
  snapshot.forEach(function(userSnapshot) {
    var models = userSnapshot.val();
    console.log(models);


     if (models.brand == $scope.theModel){

    $scope.carDetails.push(models);
         }
       });
    });

   }

這似乎是新的JavaScript開發人員犯的一個非常普遍的錯誤，即Async行為，因此值得一讀。

在此解決方案中，我們從then函數內部調用了一個函數。 這樣，我們就可以確定可以在其他函數中使用的數據

Answer 3

$scope.theModel會按預期在“ then”塊內進行設置，但由於處於異步狀態，因此會在調用第二個console.log（函數外部）之后發生。

如果使用角度分量，則可以在$ onInit方法中初始化theModel：

angular.module('app', []).component('myComponent', {
   bindings: {
     title: '@'
   },
   controller: function() {
      this.$onInit = function() {

        // Init the variable here
        $scope.theModel = null;        
      });

      //Following code should not be in the controller, but in a service (here just as sample)
      var refModels = firebase.database().ref("/users/" + $scope.UserID);

      refModels.once('value').then(function (snapshot) {
        snapshot.forEach(function (snapshot) {
          var usersValue = snapshot.val();
          console.log("users values", usersValue.carModel);

          // From this moment your variable is set and available outside
          $scope.theModel = usersValue.carModel;
      });
   },
   templateUrl: 'template.html'
   });

Answer 4

您可以看到價值的變化。 在另一個答案中說明了異步行為。

   $scope.$watch('theModel', function(newVal){
      console.log(newVal);
   });

我也會在$ scope.theModel = usersValue.carModel上使用$ evalAsync（）;

$scope.$evalAsync(function(){
    $scope.theModel = usersValue.carModel;
});