当范围值发生变化时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不会改变。

我是新角度，所以任何建议将不胜感激。

编辑： 我只是发现问题可能与我为Firebase实现代码的方式有关，因为我只注意到只有当错误来自Firebase错误回调时才会发生延迟。如果错误是因为该字段为空（在向Firebase发出请求之前进行的检查），则所有内容都只是像希望的那样工作，错误消息正在显示。 不幸的是，这是我知道如何使用Firebase的唯一方法。

编辑2： 这里是我用它来检查，如果字段匹配与否，或wheter用户输入任何输入字段或不

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显示没有问题。

然而，当第一和第二，如果是支票，以及应用程序开始执行这些代码行（即与火力的代码）

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>