2

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.

Novice
  • 558
  • 2
  • 9
  • 21
Fred A
  • 1,602
  • 1
  • 24
  • 41

4 Answers4

5

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

Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
3

You can use ng-bind-html directive as below. To use this, you have to include ngSanitize module and related js file.

var app = angular.module('app', ['ngSanitize']);

app.controller('TestController', function($scope) {
  $scope.string = 'With this you have agreed with the <a href="#">rules and condition</a>';
});

angular.bootstrap(document, ['app']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.8/angular-sanitize.min.js"></script>
<div ng-controller="TestController">
  <span ng-bind-html="string"></span>
</div>
Aruna
  • 11,959
  • 3
  • 28
  • 42
2
<html>
    <div
      ng-bind-html="myHTML">
    ...
    </div>
<html>

Ng Code : 

angular.module('bindHtmlExample', ['ngSanitize'])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.myHTML =
         'I am an <code>HTML</code>string with ' +
         '<a href="#">links!</a> and other <em>stuff</em>';
    }]);

Download sanitize.js from here

TheTom
  • 298
  • 3
  • 15
1

AngularJS

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

HTML

<div ng-bind-html="string"> </div>
Benyi
  • 912
  • 2
  • 9
  • 24