角度コントローラを使用してFirebaseからデータを取得

Question

角度とfirebaseを使用して新しいものを作成し、データベースからデータを取得してスコープに送信し、次にng-repeatを使用するコントローラを作成しようとしています。私のコードは次のとおりです。それは私がデータベースに持っているデータを印刷し、それは動作しますが、とき：「内部」

var todoApp = angular.module('todoApp', ['todoApp.controllers','ui.router','firebase']); 

todoApp.config(function($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise('/home'); 

    $stateProvider 

     .state('home', { 
      url: '/home', 
      templateUrl: 'templates/home.html' 
     }); 

}); 

var todoControllers = angular.module('todoApp.controllers', ['firebase']); 

todoControllers.controller('homeCtrl',function($scope){ 

     db.ref("imagenes").on('value', function (snapshot) { 

     //asignamos a la variable del controlador 
     $scope.imagenes = snapshot.val(); 
     console.log('inside: ' +$scope.imagenes); 

    }); 

    console.log('outside: '+$scope.imagenes); 

}); 

<!-- AngularJS --> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script> 

    <!-- Firebase --> 
    <script src="https://www.gstatic.com/firebasejs/3.6.6/firebase.js"></script> 

    <!-- AngularFire --> 
    <script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script> 

この例では、私はそれがあるとき、私が受け取るかを確認するにconsole.logを使用していますそれは '外側：'です。これは未定義を表示するので、htmlでは未定義です。

助けてもらえますか？ ありがとう！

Answer 1

$ scopeがFirebaseのon('value', [callback])イベントの中に設定されていると、角の変化の検出がトリガされません。あなたはこのように、$scope.$applyで$スコープ変数を設定してコードをラップすることによってこの問題を解決することができます

db.ref("imagenes").on('value', function (snapshot) { 
    //asignamos a la variable del controlador 
    $scope.$apply(function(){ 
     $scope.imagenes = snapshot.val(); 
    }); 
}); 

あなたは、.on('value', [callback])を使用して、実際にイベントリスナーを登録していること、そのたびにそれを認識していない場合にも、注意してくださいFirebase（または任意の子オブジェクト）で参照されるオブジェクトが変更されると、コールバックが呼び出されます。これは意図的なものかもしれませんが、一度だけデータを取得する場合は、代わりにonce('value', [callback])を使用してください。

Firebaseの最新バージョンを使用している場合（私が信じている最後の1年以内に）、コールバックの代わりに約束を使用することができます。これにより、$q.$whenを使用して、角度トリガーに$scope.applyの代わりにダイジェストを付けることができます。これを行うには、コードを次のように変更します。

$q.$when(db.ref("imagenes").on('value').then(function (snapshot) { 
    //asignamos a la variable del controlador 
    $scope.imagenes = snapshot.val(); 
}));