當範圍值發生變化時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>