Перенос слов с помощью ng-bind-html

Question

Перенос слов с помощью ng-bind-html

0

Я использую AngularJS для создания приложения для управления заметками. Во время этого, я столкнулся с несколькими проблемами, где я могу выбрать свою ошибку: должен ли я иметь приложение, которое не может переносить слово или тот, который не может ощутить ключ возврата.

Сначала мое приложение не воспринимало бы ключ возврата или дополнительные пробелы, поэтому в моей директиве примечания я заменил: {{note.body}} на: 

Хотя он исправил проблему с помощью клавиши ввода, но это не приведет к переносу слов:

Используя ng-bind-html, автоматическая перенос слов завершается неудачно - что было бы ужасно для моего приложения, так как я хочу, чтобы он был чрезвычайно гибким, когда дело доходило до изменения размера.

Как исправить эту ошибку?

Здесь мой формат фильтра: angular.module('NoteWrangler').filter('format', function(){ return function(input) { if(!input) return input; var output = input//replace possible line breaks..replace(/(\r\n|\r|\n)/g, ' ')//replace tabs.replace(/\t/g, '   ')//replace spaces..replace(//g, ' '); return output; }; });

Примечание Директива:

'''<div class="container note note-full">
    <h2>{{note.title}}</h2>
    <p ng-bind-html="note.body | format"></p>
    <p class="text-muted date">Posted on {{note.timestamp | date}}</p>
</div>'''

Если использовать тег, это единственный способ решить эту проблему, тогда я это сделаю - после того, как сделаю фон, границу и т.д. Невидимыми с некоторыми CSS.

Lawful Lazy 20 авг. 2015, в 21:28

Источник

Теги:

javascript

html

angularjs

ng-bind-html

2 ответа

0

Добавление свойства

.text-pre-wrap{
    white-space: pre-wrap !important;
}

не было достаточно для меня.

Мне также необходимо было добавить:

.text-pre-wrap{
    white-space: pre-wrap !important;
    overflow-wrap: break-word;
}

И в html:

<div ng-bind-html="notes.html" class="text-pre-wrap"></div>

Henri 20 дек. 2017, в 06:59

Ещё вопросы

Mudasser Ajaz · Accepted Answer · 2015-08-20T18-03-00.000Z

Добавьте этот класс css в свой  или любой другой тег, который вы хотите использовать:

.text-pre-wrap{
    white-space: pre-wrap !important;
}

Кроме того, вам нужен только этот фильтр

angular.module('NoteWrangler').filter('format', function () {
  return function (input) {
    if (input) {
      return input.replace(/\n/g, "<br />");
    }
  };
});

@MathManiac пометьте его как принятый, если он решит вашу проблему :)
Просто любопытно: не мог ли я сделать [ng-bind-html] { ... } в своей таблице стилей, чтобы исправить все для каждого тега, или это было бы плохой практикой по какой-то причине?
Не уверен насчет этого, но, поскольку вы в большинстве случаев используете  , я посоветую связать это свойство примерно так: p {white-space: pre-wrap !important; }