Вопрос по hyperlink, sanitize, angularjs, html-escape-characters, anchor – AngularJS создает html / link / anchor из текста (escape / unescape html в представлении)

9

У меня есть контроллер, который имеет назначенное значение:

$scope.post = 'please visit http://stackoverflow.com quickly';

У меня есть текст в моем HTML:

<p>{{post}}</p>

Я хотел бы сделать кликабельную ссылку на URL (окружить ее тегами привязки).

Я пытался изменить свой HTML-код на:

<p ng-bind-html="post | createAnchors"></p>

Вот упрощенный пример проблемы:

http://jsfiddle.net/T3fFt/4/

Вопрос в том, как мне избежать всего текста поста, кроме ссылки, которая будет окружена якорными тегами? ?

Почему нет принятого ответа на этот вопрос. По крайней мере один из них одобрен Като. Сделай это так. Kato

Ваш Ответ

2   ответа
20

что вы можете использовать линкулярный фильтр Angular для этого:https://docs.angularjs.org/api/ngSanitize/filter/linky

Вы можете использовать это так:

<p ng-bind-html="post | linky"></p>

Вам нужно будет включить модуль очистки Angular, чтобы линки работали:

angular.module('myApp', [
    'ngRoute',
    'ngSanitize',
    'myApp.filters', 
    ...
Да, @Dylanthepiguy, это желаемое поведение для этого вопроса. exclsr
Работает отлично !! Kumar
@ Даан Я на Angular v1.2.21, и он отлично работает.<div ng-bind-html="post.Text | linky:'_blank'"></div> GFoley83
Предупреждение всем, кто хочет использовать linkyFilter: он экранирует символы HTML, поэтому ваш необработанный HTML-код (но со ссылками) будет отображаться в элементе с привязкой к html Dylanthepiguy
Я думаю, что линки-фильтр был доступен с AngularJS 1.0:code.angularjs.org/1.0.2/docs/api/ngSanitize.filter:linky exclsr
1

Вы можете использовать эту замену для строки:

'please visit http://stackoverflow.com quickly'.replace(/(http[^\s]+)/, '<a href="$1">$1</a>')

тогда вам нужно будет использовать$sce обслуживание иngBindHtml директивы.

$sce это сервис, который предоставляет AngularJS сервисы Strict Contextual Escape

Так что в вашем фильтре вам нужно обернуть ссылки сa затем теги возвращают доверенный HTML, используя$sce.trustAsHtml:

filter('createAnchors', function ($sce) {
    return function (str) {
        return $sce.trustAsHtml(str.
                                replace(/</g, '&lt;').
                                replace(/>/g, '&gt;').
                                replace(/(http[^\s]+)/g, '<a href="$1">$1</a>')
                               );
    }
})

Рабочие примеры:http://jsfiddle.net/T3fFt/11/

Правильно ли я понимаю: когда вы устанавливаете ng-bind-html, Angular не будет экранировать html. Когда вы вручную устанавливаете $ sce.trustAsHtml, это то же самое, верно? Так что в таком случае это мне не поможет Daan
ты пробовалtrustAsHtml? CD..
@ Даан: см. Мое редактирование с рабочим примером. CD..
Можете ли вы сказать мне, какие функции точно? Я попробовал несколько из них, но не получил его на работу. Daan
Проблема с этим решением состоит в том, что остальная часть текста не экранируется. Проверьтеjsfiddle.net/T3fFt/5 где другой якорь не избежал. Я обновил свой вопрос с помощью jsfiddle. Daan

Похожие вопросы