javascript – Angularfire – $scope在异步调用后不会更新,并且$apply throws error

前端之家收集整理的这篇文章主要介绍了javascript – Angularfire – $scope在异步调用后不会更新,并且$apply throws error前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在试图更好地了解Angularfire在这种情况下的工作方式.我的“webapp / test”上有2个控制器,一个供用户登录,另一个用于显示一些个人资料信息.用户使用Facebook登录后,如果用户存在,我使用“uid”检查firebase数据库,并检索数据库中保存的一些信息.

现在的问题是,如果因为数据库读取调用是异步的,我无法获取信息在视图上更新,并且使用$scope.$apply()只有在我不更改页面时才有效,一旦我点击页面上的那些使用另一个控制器,我得到以下内容

Error: [$rootScope:inprog] http://errors.angularjs.org/1.3.15/$rootScope/inprog?p0=%24digest

调节器

app.controller("profile",function($scope,loginService,Auth,userManagement) {
    var authData = Auth.$getAuth();
    if (authData != null) {
        $scope.authData = authData;
        userManagement.saveLastLogin(authData);
        userManagement.userDatabaseRead(authData).done(function(userDatabase) {
                $scope.userDatabase = userDatabase;
                $scope.$apply();
        });
    };
    $scope.logoutFB = function() {
        loginService.logoutUser();
        Auth.$onAuth(function(authData) {
            $scope.authData = authData;
        });
    };
})

app.factory("userManagement",function(FirebaseUrl) {
    return {
        saveLastLogin: function(authData) {
            var userId = authData.uid;
                var ref = new Firebase(FirebaseUrl);
                var users = ref.child("users");
                var timestamp = Date.now();
                users.child(authData.uid).update({
                    last_activity: timestamp,});
                console.log('user ' + userId + ' last login was on' + timestamp);
        },userDatabaseRead: function(authData) {
            var ref = new Firebase(FirebaseUrl+"users/"+authData.uid);
            var data,def = $.Deferred();
            ref.on("value",function(snapshot) {
                var userDatabase = snapshot.val();
                def.resolve(userDatabase);
            },function (errorObject) {
              console.log("The read Failed: " + errorObject.code);
            });
            return def.promise();
        },}
});

更新1:查看

这是我的观点,我想要做的是一旦用户登录,显示属于该用户uid的firebase结构中的一些信息

logoutFB()" ng-show="authData" class="btn btn-danger facebook-login">logout
最佳答案
你实际上并没有使用AngularFire,只有Firebase SDK.

Angular不了解Firebase SDK,因此您需要使用AngularFire,因此它会为您触发$digest循环.

要包含AngularFire,请添加JavaScript文件,然后将其添加到依赖关系数组中.

angular.module('app',['firebase'])
  .constant('FirebaseUrl','SEObject,rootRef) {
  return {
    saveLastLogin: saveLastLogin,userDataseRead: userDatabaseRead
  };

  function userDataseRead(authData) {
    var userRef = rootRef.child('users').child(authData.uid);
     // return a $firebaSEObject with the ref,don't create a listener
    return $firebaSEObject(userRef);
  }

  function saveLasLogin(authData) {
     // this code is good because it doesn't do any listening,// just updates to the server
  }
}

function MyController($scope,userManagement) {
  var authData = Auth.$getAuth();
  $scope.userDatabase = userManagement(authData);
}

您原始代码中需要注意的一些事项.

你正在使用Promise是一个实时监听器,这是一种反模式.

Promise只会触发一次,而Firebase数据库侦听器可以多次触发.

ref.on("value",function(snapshot) {
  var userDatabase = snapshot.val();
  def.resolve(userDatabase); // don't do this
 },function (errorObject) {
  console.log("The read Failed: " + errorObject.code);
});

当您使用$firebaSEObject或$firebaseArray时,AngularFire会为您解决此问题.

在路由器中使用resolve来注入用户

Rather than grab the user in the controller,you can ensure that if the user is authenticated they will be injected in the controller:

app.config(["$routeProvider",function($routeProvider) {
$routeProvider.when("/home",{
  controller: "HomeCtrl",templateUrl: "views/home.html",resolve: {
    currentAuth: ["Auth",function(Auth) {
      return Auth.$requreAuth();
    }]
  }
})
原文链接:https://www.f2er.com/js/428936.html

猜你在找的JavaScript相关文章