在AngularJS中更新工厂时更新范围变量

Question

我是 AngularJS 的新手，目前在我的实时应用程序中使用 Google Firebase。我创建了一个工厂“Friends”，它使用以下代码实时检查我的 Firebase 数据库：

angular.module('App')

.factory('friendsFactory', function(){

   var friends = [];
   var friendshipRef = firebase.database().ref('friendships');

   friendshipRef.on('value', function(snapshot){

   //etc.. updates friends array

   });

   return{
      getFriends: function(){
        return friends;
      },
      //etc
   }

在我的控制器中，我将$scope.friends 变量设置为我的工厂类.getFriends() 方法。这很好用，我的页面正确显示所有朋友。

$scope.friends = friendsFactory.getFriends();

但是，一旦我的工厂更新，这些更改不会反映在我的范围变量和视图上。我尝试过使用$apply、$watch 等，但我不知道如何确保我的范围和视图在出厂后立即更新。现在，每次我导航到不同的页面并返回时，才会显示更改。它们不会实时更新。谁能帮我完成这个？非常感谢！

Answer 1

您应该使用 angularfire 执行此操作，它在 firebase 数据库、模型和视图之间进行三向绑定。

1.在您的项目中包含angularfire。

2.根据这个更新你的工厂，你不需要做任何事情。每当firebase数据库中friendships节点上的数据更新时，都会通知angularfire，angularfire会更新局部变量并调用$scope.$apply，因此视图也会更新。

// factory
angular.module('App', ['firebase'])

.factory('friendsFactory', function($firebaseArray){
   var friendshipRef = firebase.database().ref('friendships');

   return {
       friends: $firebaseArray(friendshipRef)
   }
});

// controller
$scope.friends = friendsFactory.friends;

Answer 2

因为，您在开始时只获得一次列表。

$scope.$apply必须在on部分制作，但在工厂里做是不对的。

尝试使用angularfire

快速解决方案，可行：

angular.module('App')
.factory('friendsFactory', function(){

   var friends = [];
   var friendshipRef = firebase.database().ref('friendships');

   friendshipRef.on('value', function(snapshot){
       $timeout(function () {
           //etc.. updates friends array
       });
   });

   return{
      friends: friends,
      //etc
   }

在控制器中：

$scope.friends = friendsFactory.friends;