Display string containing HTML tag in Angular

html angularjs href angularjs-ng-href
Fred A picture Fred A · Nov 10, 2016 · Viewed 9k times · Source

I checked for answers in SO but couldn't find satisfying answer. So here I'm asking :

I have a string as follow

var string = "With this you have agreed with the <a href='#'>rules and condition</a>"

Which I need to render as both string (for the text portion) and HTML (for the HTML portion).

How do I achieve this in AngularJs? I tried with $compile but it didn't work for me, it output chunks of seemingly minified code on the page.

Answer

Sajeetharan picture Sajeetharan · Nov 10, 2016

You can do this using ng-bind-html,

angular.module('myapp', ['ngSanitize'])
.controller('foo', function($scope) {
    $scope.bar = "With this you have agreed with the <a href='#'>rules and condition</a>";
});

<div ng-controller="foo">    
    <div ng-bind-html="bar"></div>    
</div>

DEMO

Related questions

href causes unintended page reload with Angularjs and Twitter Bootstrap

I am working on a project that uses Angularjs and Twitter Bootstrap. Bootstrap uses # to toggle components such as popover, modal etc. for example: <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a&…

Read More
AngularJS ngClass conditional

Is there any way to make an expression for something like ng-class to be a conditional? For example, I have tried the following: <span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span> The issue with this …

Read More
How do I delete an item or object from an array using ng-click?

I am trying to write a function that enables me to remove an item when the button is clicked but I think I am getting confused with the function - do I use $digest? HTML & app.js: <ul …

Read More