javascript - Firebase 响应后 Angular.js 页面未更新

Question

myApp.controller('RegistrationController', ['$scope',
  function($scope) {
    var auth = firebase.database().ref();
    //  console.log("auth::"+auth);

    $scope.login = function() {
      $scope.message = "Welcome " + $scope.user.email;
    }; //login


    $scope.register = function() {    
      console.log($scope.user.email);
      console.log($scope.user.password);
      console.log("jdxnx::" + auth);
      firebase.auth().createUserWithEmailAndPassword($scope.user.email, $scope.user.password).then(function() {
        $scope.message = "Hi" + $scope.user.email + " you have registered"
      }).catch(function(error) {
        $scope.message = error.message;
        console.log($scope.message);
      }); // //createUser
    }; // register
  }
]); // Controller

在上面的代码中，当我单击“提交”时，我的注册函数将运行，然后在 firebase.auth().createUserWithEmailAndPassword 内运行。运行但在我收到 firebase.auth().createUserWithEmailAndPassword($scope.user.email,$scope.user.password) 的响应之前函数我的事件从它出来，然后从寄存器函数返回到页面，由于{{message}}值在 html 页面中保持空白，但在后端 firebase.auth().createUserWithEmailAndPassword($scope.user.email,$scope.user.password)函数处理并获取响应，但事件在处理完成之前返回到页面。我希望该功能事件应该等到我得到响应为止。

请注意，我使用的是 firebase 3.x.x 。

Answer 1

firebase.auth().createUserWithEmailAndPassword 是一个异步函数，不属于 Angular.js。因此，Angular.js 无法知道其对 $scope 的回调所做的修改，并且不会更新页面。尝试在回调完成后添加 $scope.apply() 。

firebase.auth().createUserWithEmailAndPassword($scope.user.email, $scope.user.password).then(function() {
    $scope.message = "Hi" + $scope.user.email + " you have registered"
    $scope.apply();
  }).catch(function(error) {
    $scope.message = error.message;
    console.log($scope.message);
    $scope.apply();
  });

您可能感兴趣的其他内容:

• 看看 AngularFire项目，它将负责在 Firebase 操作后触发 Angular.js。
• 不推荐使用带有独立 Controller 和 $scope 的 Angular.js 方式，而且已经有一段时间没有这样做了。您可能想了解一下 Controller-As 语法 (Angular.js 1.3+) 或更好的组件 (Angular.js 1.5+)。