값 변경 후 AngularJS가 업데이트되지 않습니다.

Question

제 의도는 사용자 로그인 후 탐색 바를 업데이트하는 것입니다. 기본적으로 로그인 후 Login ~ Hi, {{usr.username}}으로 변경되어야합니다.
그러나 로그인 한 후에는 업데이트되지 않으므로 다시 변경하려면 Login을 클릭해야합니다. 그러나 콘솔에서 사용자 정보는 로그인 직후에 기록됩니다. 된 index.html에서

는, 코드의 일부가 보이는 같은 $scope.loggedIn는 허위 $scope.usr로서 null로 초기화

<div class="item" ng-click="loginmodal()" ng-hide="loggedIn">Log in</div> 
<div class="item" ng-show="loggedIn">Hi, {{usr.username}}</div> 

. 나는 인증 중포 기지를 사용하고 있습니다 :

콘솔에서

FirebaseRef.authWithPassword({ 
    "email" : email, 
    "password" : password 
}, function(error, authData) { 
    if (error) { 
     console.log('Login Failed!', error); 
    } else { 
     console.log('Authenticated successfully with payload:', authData); 
     FirebaseRef.child("users").child(authData.uid).once('value', function(dataSnapshot) { 
      $scope.usr = dataSnapshot.val(); 
     }); 

     $scope.loggedIn = true; 

     console.log($scope.usr); 
     console.log($scope.loggedIn); 
    } 
}); 

, 나는 $scope.loggedIn 같은 사실을 가지고 있지만 널 (null)로 $scope.usr 있습니다.

authWithPassword() 기능을 사용하는 방법이 잘못되었거나 강제로 변경 사항을 업데이트 할 수 있습니까?

Answer 1

$scope 개체의 변경 사항이 $digest 루프 외부에서 수행되면 AngularJS가보기를 업데이트하지 않습니다.

걱정하지 마세요. Firebase는 AngularJS 서비스가있는 인기있는 도구입니다. AngularFire라고 불리며 전역 Firebase 객체 대신이 파일을 사용해야합니다.

그래서 코드가 비슷한 것 : 더 in the documentation of AngularFire

Answer 2

$scope.usr 값을 변경 한 직후 $scope.$digest()으로 전화 해보세요. 어쨌든 Firebase를 호출하여 사용자가 비동기임을 알았 기 때문에이 호출 후에 종속 코드를 넣지는 않지만 콜백 내부에 넣을 수 있습니다.

Answer 3

전화 $ 범위를 읽기

var auth = $firebaseAuth(FirebaseRef); 
auth.$authWithPassword({ 
    email: email, 
    password: password 
}).then(function (authData) { 
    console.log('Authenticated successfully with payload:', authData); 
    var sync = $firebase(FirebaseRef.child("users").child(authData.uid)); 
    var syncObject = sync.$asObject(); 
    syncObject.$bindTo($scope, "usr"); 
}).catch(function (error) { 
    console.error('Login Failed!', error); 
}); 

을 $이 적용됩니다().

FirebaseRef.child("users").child(authData.uid).once('value', function(dataSnapshot) { 

    $scope.$apply(function(){ 
     $scope.usr = dataSnapshot.val(); 
    }); 

});