Использование угловых контроллеров для получения данных от firebase

82
6

im new, используя угловую и firebase, и я пытаюсь сделать контроллер для получения данных из базы данных, а затем отправить его в область, а затем в html использовать 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 тоже не определено.

Не могли бы вы мне помочь! Благодарю!

спросил(а) 2017-03-21T18:54:00+03:00 3 года, 8 месяцев назад
1
Решение
84

Обнаружение угловых изменений не запускается, когда $ scope установлен внутри Firebase on('value', [callback]) событие on('value', [callback]). Вы можете решить это, обернув свой код, задав переменную $ scope переменной $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 (в течение прошлого года, я полагаю), вы можете использовать обещания вместо обратных вызовов. Это позволяет вам использовать $q.$when есть угловой триггер, а не $scope.apply. Чтобы сделать это, вы измените свой код на это:

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

ответил(а) 2017-03-21T19:06:00+03:00 3 года, 8 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема