AngularJS: запись и чтение из textarea с несколькими строками

Я не могу поверить, почему я не могу найти что-нибудь к этой теме ... Я получил форму с, скажем, фамилия (вход), имя (вход), описание (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 guynnbye, что прекрасно, поскольку я могу определить, где строка перерывы есть.

Итак, теперь я хочу отредактировать этот объект. Таким образом, я хочу прочитать сохраненные данные и поместить их в форму. На сервере я теперь отредактировал текст описания так, что Я заменил 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

2 2
angularjs html multiline textarea sanitize

2 ответа:

<textarea> элементы не могут содержать другие элементы (в вашем случае, <br>). Они автономны. Вам нужно будет преобразовать переменную-returned-from-server-containing - <br> ' s обратно в \n's, и наоборот туда и обратно. Вы можете использовать директиву angular, которая обрабатывает это для вас.

0

Храните '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;
            });
        }
    };
});
4