スコープの値が変更されたときのhtmlの変更の遅れ

Question

EDIT 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は変更されません。 。

私は新しい角度ですので、どんな提案もありがとうございます。

EDIT： Firebaseのエラーコールバックからのエラーの場合にのみ、遅延が発生していることに気付いたので、Firebaseのコードを実装する方法に問題がある可能性があります。フィールドが空である（Firebaseに要求する前のチェック）ためにエラーが発生した場合、すべてが欲しいのと同じように動作します。エラーメッセージが表示されます。 残念ながら、これが私がFirebaseの使い方を知っている唯一の方法です。

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

行動は仕事があるwheter私はそれをしたいまったく同じかどうかを確認するために使用するコードですに。つまり、コントローラのスコープから更新したメッセージのエラーdivが問題なく表示されています。

しかし、ときに、第1および第2のチェックであり、私はそれが問題になるかもしれません実現するときのアプリは、これらのコードの行数（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のコードを実装していました。

EDIT 3. 私はこの作品を作ることができたが、私はこのソリューションの説明を知らないので、誰かがに来たので、もし私は、答えを作るというし、この質問でそれを残しますこのページまたは同じ問題を抱えている人は、誰かが説明できるようになる前に、これを一時的な解決策としてとることができます。

Firebaseエラーコールバックで、私は$scope.$apply()を追加して、アプリケーションが強制的にHTMLを更新するようにしました。しかし、なぜかわからないのですが、これはダイジェストサイクルや何かと関係があると思います。

Answer 1

ng-if, ng-switch ng-repeat..または新しい子スコープを作成するその他の指示文内にHTMLをラップした場合、コントローラプロパティは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>