AngularJS1中ng-if内ng-blur关联ng-model失效问题求助

这个问题的核心原因很明确：ng-if指令会创建一个独立的子作用域，而你在ng-if内部使用ng-model="QueryName"时，实际上是在这个子作用域中创建了一个新的基本类型变量，而非引用父作用域的$scope.QueryName。当ng-blur触发的函数访问父作用域的$scope.QueryName时，自然拿不到子作用域里输入的值。

最佳解决方案：使用对象属性绑定（推荐） #

AngularJS的作用域基于原型继承，对于对象类型的属性，子作用域会继承父作用域的引用，不会创建副本。我们只需要把原来的基本类型变量改成对象的属性即可：

修改后的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="query.name" 
               ng-class="query.nameError?'form-control validation_error':'form-control'" 
               placeholder="Query Name" />
        <span ng-if="query.nameErrorMsg!=''" class="errorMsg">{{query.nameErrorMsg}}</span>
      </div>
      <div class="clearfix"></div>
    </div>
  </div>
</div>

修改后的JavaScript代码：

// 初始化一个对象来存储查询相关的属性
$scope.query = {
  name: '',
  nameError: false,
  nameErrorMsg: ''
};

$scope.performValidationQueryName = function () {
  // 现在直接访问对象的属性，子作用域和父作用域共享同一个对象引用
  if($scope.query.name != null && $scope.query.name != '') {
    // 你的验证逻辑示例
    $scope.query.nameError = false;
    $scope.query.nameErrorMsg = '';
  } else {
    $scope.query.nameError = true;
    $scope.query.nameErrorMsg = 'Query name cannot be empty';
  }
};

临时解决方案：使用$parent访问父作用域（不推荐） #

如果你不想重构变量结构，可以临时用$parent直接引用父作用域的变量，但这种方式在多层嵌套的ng-if/ng-repeat中很容易出错，不推荐长期使用：

<input type="text" 
       ng-blur="performValidationQueryName()" 
       ng-model="$parent.QueryName" 
       ng-class="$parent.QueryNameError?'form-control validation_error':'form-control'" 
       placeholder="Query Name" />
<span ng-if="$parent.QueryNameErrorMsg!=''" class="errorMsg">{{$parent.QueryNameErrorMsg}}</span>

为什么对象绑定有效？ #

因为当你绑定ng-model="query.name"时，子作用域会沿着原型链找到父作用域的query对象，然后修改它的name属性——这个修改会直接作用在父作用域的对象上，所以performValidationQueryName函数能正确获取到输入的值。

内容的提问来源于stack exchange，提问作者Priyal Pithadiya