Question

在我的angular.js应用中，我有一个这样的textarea：

<textarea ng-model='model.content'>{{model.content}}</textarea>。

用户在textarea中编辑内容，然后单击一个按钮，此时我记录了model.content的当前（上一个）值，然后用textarea的当前文本更新它。

然而，textarea会在onchange事件触发时立即更新model.content（因为它是双向绑定），并且在单击按钮时，model.content已经包含textarea的文本，而且我有没有记录model.content的先前值。

问题 - 如何停止角度更新模型？在单击按钮之前，我不希望模型更新。如你所见，我根本不需要双向绑定。但是，textarea指令需要ng-model。我已经尝试创建一个自定义指令，但angular仍然将任何textarea标记视为需要双向绑定而不是未知html标记的指令。

Answer 1

您可以使用克隆（复制）模型的angular.copy()实用程序并创建新实例。

请参阅文档 HERE

<强> HTML

<div ng-controller="fessCntrl">
    <div class="text-area-container">
        <textarea   rows="2" ng-model="textModel"></textarea>
    </div>

    <button ng-click="commit(textModel);">Commit</button>

    <pre>copy: {{copy|json}}</pre>
</div>

<强> JS

var fessmodule = angular.module('myModule', []);

fessmodule.controller('fessCntrl', function ($scope) {

    $scope.copy = '';

    $scope.commit = function (textModel) {
        $scope.copy = angular.copy(textModel);
    };
});
fessmodule.$inject = ['$scope'];

演示 Fiddle

Answer 2

你正在向后做。当用户完成编辑值（并且原始内容已经被修改）时，您不应该尝试保存原始内容，而是应该在之前保存它，当模型填充并且页面显示。

此外，您在textarea中不需要{{model.content}}。

Answer 3

您可以自己创建双向绑定。

您将保留一个包含localContent内容的本地变量textarea。然后在按钮上设置回调，该按钮将设置model.content = localContent。此外，在实际$watch上设置model.content，并在原始模型更改时更新localContent。

如何在angular.js中创建一个没有ng-Model的简单textarea？

3 个答案: