Блог

Что я пытаюсь сделать:

Я хочу вывести все книги в узле book на моей домашней странице. Что мне нужно, так это массив объектов, содержащих все книги в узле book, чтобы я мог перебирать их с помощью директивы ng-repeat в AngularJS. В приведенном ниже коде, когда я консольно регистрирую данные, я получаю объект объектов, который нельзя использовать с ng-repeat . Другая проблема, с которой я сталкиваюсь, заключается в том, что когда я пытаюсь вывести переменную $scope.allBooks на страницу, ничего не появляется. Кто-нибудь может мне помочь с этим?

Использование Javascript SDK, а не Angularfire https://firebase.google.com/docs /

 // Main Controller
firebase.database().ref('books').on('value', function(snapshot) {
    var data = snapshot.val();

    $scope.allBooks = data;
    console.log(data);
});


// Book Node in Firebase
books : {
    id : {
        title: 'The Hunger Games',
        author: 'Suzanne'
    },
    id : {
        title: 'Harry Potter and the Order of the Phoenix',
        author: 'J.K.'
    }
}
  

Если вы не хотите использовать angularfire, вам нужно сообщить angular, чтобы запустить обновление.

 // Main Controller
firebase.database().ref('books').on('value', function(snapshot) {
    var data = snapshot.val();

    $scope.allBooks = data;
    console.log(data);
    $scope.$apply();
});
  

Просто добавьте, $scope.$apply() чтобы сообщить angular об обновлении.

Вы, безусловно, можете использовать объекты с ng-repeat объектами on с правильным синтаксисом. Это объясняется на странице документации ng-repeat .

Например:

 <div ng-repeat="(key, value) in myObj"> ... </div>
  

Но это нарушит порядок элементов, поэтому это определенно не рекомендуемый подход. Вместо этого вы должны использовать метод forEach для перебора дочерних элементов в правильном порядке и самостоятельно создавать массив.

Если вы используете Firebase JS SDK напрямую, Angular не будет уведомлен об изменениях ваших данных. Вы должны запустить цикл дайджеста вручную, чтобы области могли быть переоценены.

Один из способов сделать это — использовать $timeout для переноса манипуляций с областью. Это было названо лучшей практикой в старой документации Firebase.

    // Main Controller
   firebase.database().ref('books').on('value', function(snapshot) {
       var data = snapshot.val();
       console.log(data);
       $timeout(function() {
           $scope.allBooks = data;
       });
   });