即使从控制器更新后，Textarea ng-model 也会保留最后一个值

Question

这是一个相当简化的但我猜这个问题的代表性观点。请注意，我对 Angular 的了解有限。

我有一个带有 <pre> 块的表单，该块显示一个不可编辑的 JSON 字符串 (StringA)，然后是一个按钮，它启用了一个文本区域的视图，我可以在其中编辑 JSON 格式的字符串 (StringB) 并提交它到后端。问题是，即使我通过其他方式（即不通过浏览器编辑器）更新 StringA 并将其检索到前端以显示它，textarea 中应该由ng-nmodel=StringB 绑定到 StringB 的字符串也永远不会更新，它保留了我最后在 textarea 中编辑的最后一个值。重要的是，每当我启用 de 编辑模式时，StringB 都会通过StringB = JSON.stringify(StringA, null, ' ') 的角度代码更新。我什至将值打印到 StringA 和 StringB 的控制台，我可以看到它们具有正确的值（基本上两者都是相同的），但我在 textarea 中看到的字符串始终是我上次通过浏览器编辑的字符串。

例如，假设 StringA 是 "{"A": 1}"，我启用编辑模式，然后我格式化该字符串并分配给 StringB，以便它正确显示在文本区域中。于是我修改为{"A": 2}，提交到后端。现在我修改了几次 StringA（通过 REST API）并检索到前端以在非编辑模式下显示它。现在 StringA 的值为 {"A": 5} 并且我启用了编辑模式。 Textarea 仍将显示{"A": 2}，这是我通过浏览器方式编辑的最后一个值，即使在configEdit 函数中看到，我已经修改了StringB 的值。

这里是 HTML 代码：

<div class="form">

    <div ng-hide="showEditor" ng-model="StringA">
        <pre>{{StringA | json}}</pre>
    </div>

    <div ng-show="showEditor">
        <textarea id="editArea" ng-model="StringB" 
        ng-show="showEditor">
        </textarea>
    </div>

    <button class="button" type="submit" 
    ng-click="configEdit()" ng-hide="showEditor"> Edit </button>

    <button class="button" type="submit" 
    ng-click="update(StringB)" ng-show="showEditor"> Submit </button>

</div>

我还将包含 JS 代码，尽管我可以想象问题来自未正确处理前端（也许我不应该使用 textarea 等）

$scope.configEdit= function() {
    $scope.showEditor= true;
    $scope.StringB= JSON.stringify($scope.StringA, null, '  ');
}; 

Answer 1

您的代码似乎有问题... 在您的 js 代码中，您使用的是 stringA，其中与 html StringA 相同。使用适当的编码标准来避免此类问题

你不应该在 div 上有 ng-model