Ответ 1
Начните с обновления до углового Fire 0.6. Это выглядит 0,3. * Ish. angularFire был изменен на $firebase
и имеет гораздо более мощный и упрощенный интерфейс.
Vanilla Firebase
Я сделаю это с трудом, так как считаю, что здесь очень важно понять основополагающий принцип. Это довольно сложно, и я только рассмотрю основные вопросы. Существует также множество крошечных случаев:
angular.module('app', [])
.controller('UsersController', function($scope, $firebase, $timeout, $routeParams){
var userId = $routeParams.userId;
$scope.user = $firebase(new Firebase('URL/user/'+userId));
// or, for 3-way binding and automatic writes back to Firebase
var userRef = $firebase(new Firebase('URL/users/'+userId)).$bind($scope. 'user');
// grab this users' books using Firebase (the hard way)
$scope.books = {};
var booksRef = new Firebase('URL/books/');
// fetch the user book list dynamically because it may change in real-time
var indexRef = new Firebase('URL/user/'+userId+'/books');
// watch the index for add events
indexRef.on('child_added', function(indexSnap) {
// fetch the book and put it into our list
var bookId = indexSnap.name();
booksRef.child(bookId).on('value', function(bookSnap) {
// trigger $digest/$apply so Angular syncs the DOM
$timeout(function() {
if( snap.val() === null ) {
// the book was deleted
delete $scope.books[bookId];
}
else {
$scope.books[bookId] = snap.val();
}
});
});
});
// watch the index for remove events
indexRef.on('child_removed', function(snap) {
// trigger $digest/$apply so Angular updates the DOM
$timeout(function(snap) {
delete $scope.books[snap.name()];
});
});
});
Затем HTML (это будет одинаково для других примеров ниже):
<div data-ng-repeat="(bookId, book) in books">
{{bookId}}: {{book.title}}
</div>
Некоторые из краевых случаев, не полностью покрытые здесь:
- данные не сортируются по приоритету
- когда запись удаляется из индекса, должен вызывать() по пути данных
- изменения в упорядочении индекса не изменят порядок записей данных
- Значение индекса не хранится нигде для ссылки (если это имеет значение)
FirebaseIndex
FirebaseIndex - простая утилита, которая использует индекс, подобный вашему списку книг, и управляет кодом, который мы только что создали выше, более сложным способом.
К сожалению, FirebaseIndex не поддерживает события value
, поэтому он не может использоваться с угловым Fire после 0,5.0 из-за изменения внутренних механизмов загрузки в угловом режиме. Так что это не так коротка и сладка, как раньше.
angular.module('app', [])
.controller('UsersController', function($scope, $firebase, $timeout){
var userId = $routeParams.userId;
$scope.user = $firebase(new Firebase('URL/user/'+userId));
var fb = new Firebase(URL);
var index = new FirebaseIndex( fb.child('user/'+userId+'/books') );
$scope.books = {};
// almost magic
index.on('child_added', function(snap) {
$timeout(function() { $scope.books[snap.name()] = snap.val(); });
});
index.on('child_removed', function(snap) {
$timeout(function() { delete $scope.books[snap.name()]; });
});
});
Firebase.util.join
Firebase-util - гораздо более мощная и сложная библиотека для нормализации путей. Поскольку он возвращает объект, который работает точно так же, как регулярная ссылка Firebase, он также может быть легко использован с угловымFire 0.5 и выше.
angular.module('app', [])
.controller('UsersController', function($scope, $firebase){
var userId = $routeParams.userId;
$scope.user = $firebase(new Firebase('URL/user/'+userId));
var fb = new Firebase(URL);
var ref = new Firebase.util.intersection( fb.child('user/'+userId+'/books'), fb.child('books') );
// magic!
$scope.books = $firebase(ref);
});