AngularJS：使用多行写入和读取文本区域

我不敢相信为什么我找不到这个主题的任何内容...... 我得到了一个表格，其中包含姓氏（输入）、名字（输入）、描述（文本区域，因为我想提供几行）。让我们从创建一个新对象开始：

好的，你输入类似的内容

姓：fox

名：peter

描述：

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

bye

这到达我的 Java Spring MVC 后端控制器时为what can I say ..\nwell I'm THE guy\n\nbye这很好，因为我可以确定换行符在哪里。

所以，现在我想编辑这个对象。因此我想读取存储的数据并将其放入表单中。在服务器端，我现在编辑了描述文本，以便替换\n with <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 ng-bind-html="my.nice.description"></textarea>

这无论如何都不起作用。这意味着我得到
在我的文本中，未渲染。

尽管这似乎是一项可笑的正常任务。这是一个带有简单多行框的表单，所以我想写几行，我想阅读它们，我想编辑它们。 由于我是一个后端人员，对 HTML 和 AngularJS 不太熟悉，我希望我只是使用了错误的 html 元素或类似的东西......也许有人可以帮助我？真令人沮丧:(

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

将 'br' 存储在您的模型中，以便您可以使用 ng-bind-html。添加一个指令到你的文本区域，它可以在你的 $viewVale ('\n') 和你的模型之间进行转换。

.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;
            });
        }
    };
});