javascript - 当范围值更改时，html 中的延迟更改

Question

参见编辑 3。我目前正在使用 Angular 和 Firebase 构建应用程序。但我有一点问题。当我更改 Controller 中的范围值时，更改不会影响 html。

我想使用 ng-if 在发生错误时显示错误警报。我设置了<div ng-if="isThereAnyError">{{errorMessage}}</div>在我的 Controller 中，当出现错误时，我会将 isThereAnyError 的范围值设置为 true 和 errorMessage ="some error hint" 。这些更改不会在 html 端生效，尽管当我在 console.log 中打印错误时它确实显示了更改。

这是完整的 html 和 Controller 代码

<h3 class="with-line">Ubah Password</h3>

<div class="row">
  <div class="col-md-6">
    <div class="form-group row clearfix">
      <label for="inputPassword" class="col-sm-3 control-label">Password</label>

      <div class="col-sm-9">
        <input ng-model="user.password" type="password" class="form-control" id="inputPassword" placeholder="" value="12345678">
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-group row clearfix">
      <label for="inputConfirmPassword" class="col-sm-3 control-label">Confirm Password</label>

      <div class="col-sm-9">
        <input ng-model="user.repassword" type="password" class="form-control" id="inputConfirmPassword" placeholder="">
      </div>
    </div>
  </div>
</div>
<div class="alert alert-danger" ng-if="gagalubahpassword">{{messagegagalubahpassword}}</div>
<button ng-click="ubahPassword(user)" type="button" class="btn btn-primary btn-with-icon save-profile">
  <i class="ion-android-checkmark-circle"></i>Ubah Password
</button>

Controller 。

$scope.ubahPassword = function(user){

  if(typeof user!='undefined'){
    if(user.password !='' && user.password === user.repassword){

      // $scope.gagalubahpassword = false;
      appAuth.currentUser.updatePassword(user.password).then(function() {
        // Update successful.
        console.log("password berhasil diubah");
      }, function(error) {
        // An error happened.
        console.log("password gagal diubah");
        console.log(error.message);
        $scope.messagegagalubahpassword = "Error : "+error.message;
        $scope.gagalubahpassword = true;
      });
    }else {
      $scope.messagegagalubahpassword = "Pastikan kolom password terisi dengan benar dan sama";
      $scope.gagalubahpassword = true;
      console.log("password tidak cocok");
    }
  }else{
    $scope.messagegagalubahpassword = "Pastikan kolom password terisi dengan benar dan sama";
    $scope.gagalubahpassword = true;


  }
}

奇怪的是，当我编辑文本字段时，html 会更新，但就是这样，如果我不做任何事情(更改文本字段值)，那么 html 不会改变。

我是 Angular 新手，因此任何建议将不胜感激。

编辑:我只是发现问题可能出在我实现 Firebase 代码的方式上，因为我刚刚注意到只有当错误来自 Firebase 错误回调时才会发生延迟。如果错误是因为该字段为空(在我向 Firebase 发出请求之前进行的检查)，则一切都会按需要进行，则会显示错误消息。不幸的是，这是我知道如何使用 Firebase 的唯一方法。

编辑2:这是我用来检查字段是否匹配，或者用户是否在输入字段中输入任何内容的代码

if(typeof user!='undefined'){  //to check if user actually input anything
//to check if password filed and repassword field is match
if(user.password !='' && user.password === user.repassword){

      // the code to change user password in firebase auth
      appAuth.currentUser.updatePassword(user.password).then(function() {
        // Update successful.
        console.log("password berhasil diubah");
      }, function(error) {
        // An error happened.
        // Error that come from firebase, the problem is only happen in this block.
        console.log("password gagal diubah");
        console.log(error.message);
        $scope.messagegagalubahpassword = "Error : "+error.message;
        $scope.gagalubahpassword = true;
      });
}else {
//change on this block is working just fine
  $scope.messagegagalubahpassword = "Pastikan kolom password terisi dengan benar dan sama";
  $scope.gagalubahpassword = true;
  console.log("password tidak cocok");
}
}else{ //change on this block is working just fine
$scope.messagegagalubahpassword = "Pastikan kolom password terisi dengan benar dan sama";
$scope.gagalubahpassword = true;
}

该行为完全按照我的意愿工作。我的意思是，带有我从 Controller 范围更新的消息的错误 div 没有问题地显示。

但是，当检查第一个和第二个 if 时，应用程序开始执行这些代码行(与 firebase 相关的代码)

appAuth.currentUser.updatePassword(user.password).then(function() {
        // Update successful.
        console.log("password berhasil diubah");
      }, function(error) {
        // An error happened.
        console.log("password gagal diubah");
        console.log(error.message);
        $scope.messagegagalubahpassword = "Error : "+error.message;
        $scope.gagalubahpassword = true;
      });

就在那时，我意识到这可能是我实现 Firebase 代码的方式存在问题。

编辑 3。我能够完成这项工作，但我不知道这个解决方案的解释，所以我将其留在这个问题中，而不是做出答案，所以如果有人来到此页面或遇到相同的问题可以采取这个在有人解释之前作为临时解决方案。

在 Firebase 错误回调中，我添加了 $scope.$apply() 来强制应用更新 html，它可以工作。但同样，我不知道为什么，我认为这与消化周期或其他东西有关，

Answer 1

如果您将 HTML 封装在 ng-if、ng-switch ng-repeat.. 或其他创建新子作用域的指令中，那么您的 Controller 属性将被 覆盖新的子作用域。请参阅this example

因此，最佳实践是始终拥有 .在你的模型中。将错误保留模型更改为分层模型以利用原型(prototype)继承。

像 $scope.errorModel = {isThereAnyError:false, errorMessage : ''} 一样更改它，然后像这样使用它:

<div ng-if="errorModel.isThereAnyError">{{errorModel.errorMessage}}</div>