AngularJS前端输入框数据无法清除问题求助

问题根源 #

ng-if 指令会生成独立的子作用域，你在HTML输入框绑定的 areaName、areaDesc 实际是子作用域里的变量，不是控制器 $scope 上的原始变量。

• 初始录入时能清除：是因为子作用域还没创建自己的 areaName/areaDesc 属性，会继承父作用域的值，此时修改父作用域能同步到视图。
• 修改输入值后无法清除：用户修改输入框内容时，子作用域会生成自己的同名属性，断开和父作用域的继承关系，之后修改父作用域的变量就影响不到子作用域的视图了。

修复方案 #

有两种实用的解决方式：

方式1：绑定对象属性（推荐） #

AngularJS里绑定对象属性能规避子作用域继承问题，因为子作用域会继承父作用域的对象引用，修改对象属性会同步到所有引用的地方。

修改控制器代码：

// 确保riskObj初始化存在
$scope.riskObj = $scope.riskObj || {};

$scope.callCancel = function() {
    $scope.riskObj.areaName = "";
    $scope.riskObj.areaDesc = "";
}

修改HTML绑定：

<div ng-if="type == 1" class="col-md-3">
    <h5><strong>Risk Area Name</strong></h5>
    <div class="form-group"> 
        <input type="text" class="form-control input-sm text-field" data-ng-model="riskObj.areaName" ng-keyup="getChangedAreaName(riskObj.areaName)" ng-disabled="type == 2">
    </div>
</div>

<div ng-if="type == 1" class="col-md-6">
    <h5><strong>Risk Area Description</strong></h5>
    <div class="form-group">
        <input type="text" class="form-control input-sm text-field" data-ng-model="riskObj.areaDesc" ng-keyup="getChangedAreaDesc(riskObj.areaDesc)" ng-disabled="type == 2">
    </div>
</div>

<div ng-if="type == 1" style="text-align:right;">
    <a href="#" data-toggle="modal" data-target="#submission"><img src="core/static/images/submit-btn.png" data-ng-click="updateRiskArea(riskObj.areaName,riskObj.areaDesc,this)" /></a>
    <a href="#"><img src="core/static/images/cancel-btn.png" data-ng-click="callCancel()"/></a> 
</div>

方式2：用$parent直接访问父作用域变量 #

如果不想调整绑定结构，可以在HTML里通过$parent直接调用父作用域的变量，跳过子作用域的属性：

修改HTML的ng-model部分：

<input type="text" class="form-control input-sm text-field" data-ng-model="$parent.areaName" ng-keyup="getChangedAreaName($parent.areaName)" ng-disabled="type == 2">

<input type="text" class="form-control input-sm text-field" data-ng-model="$parent.areaDesc" ng-keyup="getChangedAreaDesc($parent.areaDesc)" ng-disabled="type == 2">

控制器的callCancel函数保持原样即可，此时修改的就是父作用域变量，视图会同步更新。

额外提示 #

• 优先选方式1，这是AngularJS的最佳实践，能避免大部分作用域相关的坑。
• 如果你有getChangedAreaName和getChangedAreaDesc函数，记得同步修改函数内的参数引用，确保操作的是正确的变量。

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