AngularJS中编辑内容时取消功能失效问题求助

嘿，我帮你定位到问题根源了，咱们一步步来解决这个问题：

问题出在哪？ #

1. 你的<textarea>没有绑定到临时编辑变量，导致编辑时直接修改了原数据content.text——这就意味着哪怕你点取消，原数据已经被改动了，自然看不到“取消”的效果。
2. 取消按钮的逻辑只隐藏了编辑状态，但没有做任何数据回滚的操作。

具体修复步骤 #

1. 修正HTML的textarea绑定

把textarea绑定到你在edit函数里创建的临时变量editText.text，这样编辑时只会修改副本，不会碰原数据：

<!-- 修正后的Html代码 -->
<button ng-click="edit('edit')">edit</button>
<div ng-show="showEdit">
 <button ng-click="save('edit')">save</button>
 <button ng-click="cancel('edit')">cancel</button>
</div>
<p ng-if="!showEdit">{{content.text}}</p>
<div ng-if="showEdit">
 <!-- 绑定到临时编辑变量，删掉无效的div ng-model -->
 <textarea ng-model="editText.text"></textarea>
</div>

（注：原代码里div上的ng-model是无效的，ng-model只能用在表单控件上，所以直接删掉了）

2. 完善控制器里的cancel逻辑

取消时不仅要隐藏编辑框，还要重置临时编辑的内容，确保原数据不受影响：

// 修正后的controller函数
edit: function (value) {
 $scope.showEdit = true;
 $scope[value] = true;
 // 注意：原代码里的$scope.Contents应该是$scope.content，和HTML变量保持一致
 $scope.editText = angular.copy($scope.content);
}, 
cancel: function (value) {
 $scope[value] = false;
 $scope.showEdit = false;
 // 重置临时变量，保证下次编辑加载的是最新原内容
 $scope.editText = angular.copy($scope.content);
}, 
save: function () {
 var contentObj= {
 "text": $scope.editText.text
 }
 textService.edit(contentObj, this.onSuccessEdit, this.onFailureEdit);
}, 
onSuccessEdit: function (data) {
 $scope.showEdit = false;
 // 只有保存成功后，才更新原数据
 $scope.content.text = data;
}, 
onFailureEdit: function (data) {
 $scope.showEdit = true;
 // 保存失败时也重置临时变量，避免显示错误内容
 $scope.editText = angular.copy($scope.content);
}

修复逻辑说明 #

• 用angular.copy创建原数据的副本editText，编辑时只操作这个副本，彻底隔离原数据和编辑内容；
• 只有点击保存且接口调用成功后，才把原数据更新为编辑后的内容；
• 取消时直接重置临时变量，同时隐藏编辑状态，这样原数据完全不会被改动，完美实现“取消即放弃修改”的需求。

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