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

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

我想使用ng if在发生错误时显示错误警报。 我设置了

{{errorMessage}

在我的控制器中，当出现错误时，我会将

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>

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

我是新来的，所以任何建议都将不胜感激

编辑：

---

我发现问题可能出在我实现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;
}

这种行为完全符合我的意愿。我的意思是，控制器中带有我从scope更新的消息的error div显示出来没有问题

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

那时我才意识到这可能是我为Firebase实现代码的方式的问题

编辑3。 我能够做到这一点，但我不知道这个解决方案的解释，因此我将把它留在这个问题中，而不是回答，因此如果有人来到这个页面或有相同的问题，可以在有人解释之前将其作为临时解决方案

---

在Firebase错误回调中，我添加了

$scope.$apply（）

，以强制应用程序更新html，这是可行的。但是，我也不知道为什么，我假设这与摘要循环或其他东西有关，

如果您将HTML包装在

ng If，ng switch ng repeat..

或其他创建新子范围的指令中，那么您的控制器属性将被新子范围覆盖

。看

因此，最佳实践是始终保持。在您的型号中

。 将错误保持模型更改为层次模型以利用原型继承

将其更改为

$scope.errorModel={isThereAnyError:false，errorMessage:'}

，然后像这样使用它：

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

{{errorModel.errorMessage}

如果将HTML包装在

ng If，ng switch ng repeat..

或其他创建新子作用域的指令中，则控制器属性将被新子作用域覆盖。看

因此，最佳实践是始终保持。在您的型号中。 将错误保持模型更改为层次模型以利用原型继承

将其更改为

$scope.errorModel={isThereAnyError:false，errorMessage:'}

，然后像这样使用它：

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

{{errorModel.errorMessage}

从您发布的代码来看，这里发生的事情并不十分明显，但您正陷入一个非常常见的陷阱，即角度错误。

$scope.messagegagalubahspassword

和

$scope.gagalubahspassword

都是原语，并且受限制。仔细阅读那篇文章。在角度绑定中始终使用点。“我刚刚发现问题可能出在我实现Firebase代码的方式上”您可能希望显示该代码，因为上面的示例中没有与Firebase相关的内容。@DanielBeck这是我用来检查字段是否匹配的代码，或者用户是否在输入字段中输入了任何内容

if（用户类型！='undefined'）{if（user.password！=''&&user.password===user.repassword）{

该行为的工作方式与我希望的完全相同。我的意思是，控制器中带有我从scope更新的消息的错误div显示出来没有问题。@DanielBeck但是，当第一个和第二个

if

被选中时，应用程序开始执行这些代码行（与firebase相关的代码）

appAuth.currentUser.updatePassword（user.password）.然后（function（）{//Update successful.console.log（“password berhasil diubah”）；}，function（error）{//error.console.log（“password gagagal diubah”）；console.log（error.message）；$scope.messagegagagagalubahspassword=“error:”+error.message；$scope.gagalubahspassword=true；}）

@DanielBeck，这时我意识到这可能是我为Firebase实现代码的方式的问题。很抱歉，由于注释中的字符限制，我不得不多次注释。从您发布的代码来看，这里发生的事情并不十分明显，但您正陷入一个非常常见的陷阱。两者都

 $scope.messagegagalubahspassword

和

$scope.gagalubahspassword

都是原语，并且受限制。请仔细阅读该文章。在角度绑定中始终使用点。“我刚刚发现问题可能在于我为Firebase实现代码的方式。”那么，您可能会想显示该代码，因为上面的示例中没有与firebase相关的内容。@DanielBeck这是我用来检查字段是否匹配的代码，或者用户是否在输入字段中输入了任何内容

if（typeof user！=“undefi
<div ng-if="errorModel.isThereAnyError">{{errorModel.errorMessage}}</div>