FirebaseExtended / angularfire

AngularJS bindings for Firebase
MIT License
2.73k stars 632 forks source link

$firebaseArray - removing data via server does not update the view #964

Closed tbone849 closed 6 years ago

tbone849 commented 6 years ago

Version info

Angular:1.6.6

Firebase:3.9.0

AngularFire:2.3.0

Test case

I am using $http method to delete a resource via my server. I can confirm that the resource is gone from my server and locally from the $firebaseArray. However, the view is not getting updated. When I try to add a $scope.$apply(), sometimes corrects issues like this, I get a '$digest already in progress' error, which makes sense because I am already using Angular $http which will call $digest already on completion. Refreshing the page does reset the $firebaseArray and the resource is gone as expected.

I use Angular $http to add a resourse via my server and that appropriately updates the view when added to the database.

Not sure why deleting a resource is not updating the view, but does remove it locally from the array.

Steps to reproduce

Use $http to delete a resource via a server. View does not update locally.

Expected behavior

The view should update correctly to reflect the resource has been removed from the database and the array.

Actual behavior

The view does not update after deleting via the server, leaving the resource viewable.

tbone849 commented 6 years ago

Appears to be an issue with another library I am using. Everything works as advertised.

tbone849 commented 6 years ago

For future reference. I was attempting to load a $firebaseArray inside a directive, which seems to work differently when you load it into a controller (I think). At any rate the only way I could get the $firebaseArray to recognize server updates and update the scope was the following code below.

Everytime I tried to use $scope.$watch, it wouldn't recognize the remote changes. I had to use the native $firebaseArray.$watch to get it to work.

var listRef = firebase.database().ref('my-list');
var list = $firebaseArray(listRef);
$scope.list = [];

// use $firebaseArray.$watch
list.$watch(function(event){
  $scope.list = list;
})