范围值更改时html中的延迟更改

Question

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

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

这是完整的 html 和控制器代码

<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>

控制器。

$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;
}

这种行为完全按照我的意愿工作。我的意思是，带有我从控制器范围内更新的消息的错误 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.. 或其他创建新子范围的指令中，则您的控制器属性为 overridden by the new child scope。见this example

所以最好的做法是always have . in your model。 将错误保持模型更改为分层模型以利用原型继承。

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

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