Question

参见编辑3。 我目前正在使用Angular和Firebase构建App。但我有点问题。当我更改控制器中的范围值时，更改不会影响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：这是我用来检查字段是否匹配的代码，或者用户是否输入任何内容来输入字段

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>

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

1 个答案: