render HTML in angularJS 1.x

Question

I have a directive and I´m replacing IMG urls with img src to display images inline

function message($filter) {

    var directive = {
        restrict: 'EA',

        scope: {
            data: '='
        },

        link: function(scope, elem, attrs) {
            scope.data.content = scope.data.content.replace(/(https?:\/\/\S+(\.png|\.jpeg|\.jpg|\.gif))/g, "<img src='$1' alt=''>");
        },

        template: '<span>{{data.nickname}}:</span> {{data.content}}'

    };

    return directive;
}

but instead of seeing the image inline I´m seeing the HTML tag as text I´m investigating $sce but I´m not sure how to use it inside a directive.

31piy · Accepted Answer · 2017-07-24 05:31:17Z

8

+50

You are closer!. You are right about working with ngSanitize module.

It basically allows you to write raw HTML in your template (using ng-bind-html directive). You need to include it in your page, and declare it as a dependency in your module like this:

<!-- HTML -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.2/angular-sanitize.min.js"></script>

// JavaScript
angular.module("yourapp", ['ngSanitize']);

And then, bind your HTML content in a div (or whatever) using ng-bind-html directive like this:

template: '<span>{{data.nickname}}:</span> <div ng-bind-html="data.content"></div>'

Now, the raw HTML contents of data.content will be replaced as is in your directive's template. Here is a working plunker for your reference.

answered Jul 24, 2017 at 5:31

31piy

23.9k6 gold badges51 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

frodo2975 · Accepted Answer · 2017-07-31 21:07:17Z

1

So, a more angular and safer way to do this is to not write html to the template directly. Instead, you can use curly brackets to put the image url in the template like this:

template: `
    <span>{{data.nickname}}:</span>
    <img ng-if="{{data.hasImage}}" src="{{data.url}}" alt="">
`

This preserves template/data separation.

The way you had it, you're putting yourself at risk of XSS. There's a reason angular makes you jump through hoops in order to put generated html in a template. If a user ever is able to upload an image with js in the url, your site could be hacked. Angular's normal templating prevents this kind of attack automatically.

If you need multiple images, you can put add a url property to each object in your data, put the data array on the scope, then use ng-repeat to render the array of objects.

edited Jul 31, 2017 at 21:07

answered Jul 28, 2017 at 21:10

frodo2975

12k5 gold badges39 silver badges51 bronze badges

2 Comments

handsome Over a year ago

as you can see the tag img is created only if there´s a url that ends in one of the defined image extensions

frodo2975 Over a year ago

You're right, I've updated my answer to use an ng-if in the template, and I added a "hasImage" property. I also added an explanation for why it's better not to do html templating yourself in the js.

Collectives™ on Stack Overflow

render HTML in angularJS 1.x

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related