AngularJS1 : ng-blur inside the ng-if

Question

我正在尝试使用ng-blur .以下是我的HTML代码：

<div ng-if="CurrentStage==='SaveQuery'">
   <div class="col-sm-12">
      <div class="form-group row">
         <label class="col-sm-3 control-label text-right">Query Name</label>
         <div class="col-sm-9">
            <input type="text" ng-blur="performValidationQueryName()" ng-model="QueryName" ng-class="QueryNameError?'form-control validation_error':'form-control'" placeholder="Query Name" />
            <span ng-if="QueryNameErrorMsg!=''" class="errorMsg">{{QueryNameErrorMsg}}</span>
         </div>
         <div class="clearfix"></div>
      </div>
   </div>
</div>

用于模糊事件调用的 JavaScript 代码是：

$scope.performValidationQueryName = function () {
    if($scope.QueryName != null && $scope.QueryName != '') {}
};

我面临的问题是：

当div 中有ng-if="CurrentStage==='SaveQuery'"时，我的ng-model="QueryName"没有得到更新。随着文本的模糊，我$scope.QueryName = "" performValidationQueryName功能。

如果，我删除ng-if="CurrentStage==='SaveQuery'"，所有事情都运行良好，我得到了$scope.QueryName内的值。

如何调用放置在div 内部的ng-blur具有ng-if条件？

Answer 1

你应该在你的输入模型中使用 object 将解决你的问题，因为它属于 ng-if，如下所示，

模板：

<div ng-if="CurrentStage==='SaveQuery'">
      <div class="col-sm-12">
           <div class="form-group row">
                 <label class="col-sm-3 control-label text-right">Query Name</label>
                 <div class="col-sm-9">
                      <input type="text" ng-blur="performValidationQueryName(Query.Name)" ng-model="Query.Name" ng-class="QueryNameError?'form-control validation_error':'form-control'" placeholder="Query Name" />
                       <span ng-if="QueryNameErrorMsg!=''" class="errorMsg">{{QueryNameErrorMsg}}</span>
                 </div>
                 <div class="clearfix"></div>
             </div>
       </div>
</div>

控制器：

$scope.performValidationQueryName = function (queryName) {
  if (queryName != null && queryName != ''){
    //do something..
  }
};