AngularJS create html/link/anchor from text (escape/unescape html in view)

I have a controller that has an assigned value:

$ = 'please visit quickly';

I have some text in my html:


I would like to make a clickable link of the url (surround it with anchor tags).

I tried to change my html to:

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

Here is a simplified example of the problem:

The question is, how can I escape the whole post text, except for the link, which will be surrounded by anchor tags? ?


I think you can use Angular's linky filter for this:

You can use it like so:

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

You'll have to include Angular's sanitize module for linky to work:

angular.module('myApp', [

You can use this replace for the string:

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

then you'll need to use the $sce service, and ngBindHtml directive.

$sce is a service that provides Strict Contextual Escaping services to AngularJS.

So in your filter you need to wrap links with a tags then return a trusted html using $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>')

Working examples:

Need Your Help

Taxi Driver Queue management MySQL query

mysql sql database query-performance

I'm working on a Taxi Booking app back-end. I have a bookings table where I keep all the bookings information.

C++ stack allocated object, explicit destructor call

c++ stl destructor

I came across a strange use of the destructor while working on an existing library. The destructor of a stack allocated stl vector was being called explicitly, when its the case that that object ma...