Question

我正在尝试做一些应该相当简单的事情 - 从我的Firebase数据库加载一个对象并将其分配给我的控制器中的变量。当我使用Firebase函数（参见注释掉的代码）之前，这种方法运行得很好，但我想使用3向绑定，所以我试图在AngularFire中做同样的事情。

$ loaded事件似乎没有触发，因为planner对象（也不是'You Are Here'）从不打印到控制台。 user.uid字符串按预期打印到控制台，注释掉的代码完美运行。在此先感谢您的帮助。

（旁边的问题：在注释掉的代码中，我使用evalAsync来确保在检索到信息时网页上的表单实际更新 - 这是一种很好的做法吗？）

我的控制器：

   firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
            console.log("Currently logged in user...");
            console.log(user.uid);
            $scope.user = user;

           var ref = firebase.database().ref('planners/' + $scope.user.uid);
           var planner = $firebaseObject(ref);

           planner.$loaded().then(function() {
              console.log("You are here")
              console.log(planner)
           })
           .catch(function(error) {
              console.log(error)
           })
           // firebase.database().ref('planners/' + $scope.user.uid).on('value', function(response) {
           //    if (response.val() != null) {
           //       $scope.$evalAsync(function() {
           //          $scope.planner = response.val();
           //       })
           //    }
           // });
        }
        else {
           console.log('No user logged in')
           $state.go('login')
        }
    })

Answer 1

尝试改变这个......

firebase.auth().onAuthStateChanged(function(user) {

到此......

$firebaseAuth().$onAuthStateChanged(function(user) {

请参阅文档以获取更多信息

https://github.com/firebase/angularfire/blob/master/docs/reference.md#onauthstatechangedcallback-context

Answer 2

正如@Aaron Saunders建议的那样，你应该使用AngularFire auth对象，因为它更好地与Angular集成（更新$scope，触发$digest等。）。

您之前使用的代码因为$evalAsync会激活$digest如果没有运行（$digest循环是魔术师，它会绑定模型和视图）。

您实际应该做的是使用AngularFire绑定数据。他们还利用$bindTo提供“3-way binding”（模型 - 视图 - 数据库）。

正如您在$firebaseObject docs中看到的那样，数据会自动从服务器同步到客户端，但如果您想将本地更改保存回服务器，则应使用$save或$bindTo。

代码修复建议：

$firebaseAuth().$onAuthStateChanged(function(user) {
    // By using `$firebaseAuth` this function will be called in a `$digest` so all changes will be bound
    if (user) {
        console.log("Currently logged in user...");
        console.log(user.uid);
        $scope.user = user;

        var ref = firebase.database().ref('planners/' + $scope.user.uid);
        // `$destroy` previous bindings
        if ($scope.planner && angular.isFunction($scope.planner.$destroy)) {
            $scope.planner.$destroy();
        }
        $scope.planner = $firebaseObject(ref);

        // planner.$loaded().then(function() {
        //    // This code will happen only after `$digest` since its promise is relied on the `$q` service
        //    console.log("You are here")
        //    console.log(planner)
        // })
        // .catch(function(error) {
        //    console.log(error)
        // })
        // firebase.database().ref('planners/' + $scope.user.uid).on('value', function(response) {
        //    if (response.val() != null) {
        //       $scope.$evalAsync(function() {
        //          $scope.planner = response.val();
        //       })
        //    }
        // });
    } else {
        console.log('No user logged in');
        $scope.user = null;
        if ($scope.planner && angular.isFunction($scope.planner.$destroy)) {
            $scope.planner.$destroy();
        }
        $state.go('login');
    }
});

AngularFire $加载永远不会发生

2 个答案: