Question

我无法相信为什么我无法找到这个主题的任何内容...... 我得到一个表格，让我们说姓氏（输入），名字（输入），描述（textarea，因为我想提供几行）。让我们从创建一个新对象开始：

好的，你输入类似

的内容

姓氏：fox

名字：peter

描述：

what can I say ..
well I'm THE guy

bye

这到达我的Java Spring MVC Backend Controller what can I say ..\nwell I'm THE guy\n\nbye，这很好，因为我可以确定换行符的位置。

所以，现在我要编辑这个对象。因此，我想读取存储的数据并将其放在表单中。在Serverside上，我现在编辑了描述文本，以便将\n替换为<br>，以便我有HTML中断。

现在我使用angular-sanitize（ngSanitize依赖项）并使用指令ng-bind-html="my.nice.description"

如果我在DIV上使用它，一切正常，HTML被渲染，我得到休息。所以这很有效：

<span ng-bind-html="my.nice.description"></span>

或以下之一：

<div ng-bind-html="my.nice.description"></div>
<p ng-bind-html="my.nice.description"></p>

但是因为我想（重新）填写我的表单以便用户可以编辑他以前的输入，我仍然使用textarea。像这样：

<textarea ng-bind-html="my.nice.description"></textarea>

这不会以任何方式起作用。这意味着我在我的文本中得到了解决。

虽然这看起来像是一项荒谬的正常任务。它是一个带有简单多线框的表单，所以我想写几行，我想阅读它们，我想编辑它们。由于我是一个后端人，并且不熟悉HTML和AngularJS，我希望我只是使用错误的html元素或类似的东西......也许有人可以帮助我？令人沮丧的是：（

提前致谢，我猜并希望这不是一项真正艰巨的任务：x

Answer 1

store＆＃39; br＆＃39;在您的模型中，您可以使用ng-bind-html。在textarea中添加一个指令，该指令可以在$ viewVale（＆＃39; \ n＆＃39;）与您的模型之间进行转换。

.directive('lbBr', function () {

    return {
        restrict: 'A',
        require: '?ngModel',
        link: function (scope, element, attrs, ngModel) {
            if (!ngModel) {
                return;
            }

            ngModel.$parsers.unshift(function(value) {
                return value.replace(new RegExp('\n', 'g'), '<br />');
            });

            ngModel.$formatters.unshift(function(value) {
                if (value) {
                    return value.replace(new RegExp('<br />', 'g'), '\n');
                }
                return undefined;
            });
        }
    };
});

Answer 2

<textarea>元素不能包含其他元素（在您的情况下为<br>）。它们是独立的。您必须将变量从包含服务器的变量 - <br>的返回转换为\n，反之亦然。您可以使用一个角度指令来处理这个问题。

AngularJS：使用多行文字写入和阅读textarea

2 个答案: