Render HTML in angularJS 1.x
I have a directive and I replace the IMG url 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 viewing the inline image, I see the HTML tag as text. I'm researching $ sce , but I'm not sure how to use it inside a directive.
source to share
You are closer !. You are right to work with ngSanitize
.
It basically allows you to write raw HTML into your template (using a directive ng-bind-html
). 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 div
(or whatever) with a directive ng-bind-html
like:
template: '<span>{{data.nickname}}:</span> <div ng-bind-html="data.content"></div>'
Now the raw HTML content data.content
will be replaced as specified in your directive template. Here's a working plunker for your reference.
source to share
So, the more angular and safer way to do this is to not write html directly to the template. Instead, you can use curly braces to place the image url in the template like this:
template: `
<span>{{data.nickname}}:</span>
<img ng-if="{{data.hasImage}}" src="{{data.url}}" alt="">
`
This preserves the template / data separation.
As you have it, you risk XSS. There's a reason angular is forcing you to jump through hoops to put the generated html into the template. If the user can ever upload an image using js in the url, your site could be hacked. angular's normal templating automatically prevents this attack.
If you need multiple images, you can add a url property for each object to your data, put the data array in the scope, and then use ng-repeat to render the object array.
source to share