AngularJS에서 공장 업데이트시 범위 변수 업데이트

Question

AngularJS를 처음 사용하고 현재 실시간 앱으로 Google Firebase를 사용하고 있습니다. 내 팩토리 클래스 .getFriends() 방법에 내 $scope.friends 변수를 설정 내 컨트롤러에서

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 = friendsFactory.getFriends(); 

그러나 공장이 업데이트 되 자마자 이러한 변경 사항은 내 범위 변수 및 뷰에 반영되지 않습니다. $apply, $watch 등을 사용해 보았습니다.하지만 공장이 출시되는 즉시 범위와 뷰를 업데이트 할 수있는 방법을 알 수 없습니다. 지금은 다른 페이지로 돌아갈 때마다 변경 사항 만 표시됩니다. 그들은 실시간으로 업데이트하지 않습니다. 누구든지이 일을 도와 줄 수 있습니까? 고마워요!

Answer 1

목록은 시작시 한 번만 표시되므로

$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; 

Answer 2

당신은 세 가지 방법 사이의 바인딩 않습니다 angularfire를 사용하여이 일을해야한다 firebase 데이터베이스, 모델 및 뷰.

1. 프로젝트에 angularfire을 포함하십시오.

2. 이것에 따라 공장을 업데이트하십시오. 아무 것도 할 필요가 없습니다. firebase 데이터베이스에서 노드가 friendships 노드에서 업데이트 될 때마다 anglefire에 알리고 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;