Вопрос по sanitize, angularjs, anchor, html-escape-characters, hyperlink – 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   ответа
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, '>').
                                replace(/(http[^\s]+)/g, '<a href="$1">$1</a>')
                               );
    }
})

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

Нет такой функции AFAIK. CD..
выглядит просто отлично:jsfiddle.net/T3fFt/7 CD..
Я хочу, чтобы это выглядело так:jsfiddle.net/T3fFt/8I» Daan
Можете ли вы сказать мне, какие функции точно? Я попробовал несколько из них, но незаставить его работать. Daan
20

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

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

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

Вы'придется включить Angular 'Модуль sanitize для работы:

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

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