Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to render HTML Tags from ngModel?

I'm using AngularJS for binding JS variables to my HTML content, and it works fine.

JS

var app = angular.module("Tabs", [])
  .controller("TabsController", ['$scope', function($scope){
    $scope.events = my_JS_object;
  })

HTML

<div>{{events.test}}</div>

It works as long as my_JS_object.test is a simple string, like "Hello World", but once I try to put HTML tag in there, such as Hello <b>World</b> It doesn't use the tags as HTML elements, but as simple text. Which makes sense, only I have no idea how to make the HTML tags work.

like image 246
Reuven Avatar asked Oct 15 '15 12:10

Reuven


People also ask

What is [( NgModel )] used for?

The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during form validations.

How do I display HTML inside an angular binding?

If the HTML value contains a <script> tag, Angular by default will not render it as HTML. If you attempt to render a <script> tag through interpolation ({{ & }}), Angular will render the value as text.

How angular render HTML?

To render a html string in angular, we can use the innerHTML property by binding a string to it. The innerHTML property sanitizes the html, so that your app is safe from the cross-site scripting attacks(XSS).


2 Answers

As stated by Angular documentation, you can use inbuilt ng-bind-html directive to evaluate model string and insert resulting HTML into element.

Example: If you have model value like:

$scope.myHTML =
 'I am an <code>HTML</code>string with ' +
 '<a href="#">links!</a> and other <em>stuff</em>';

Use ng-bind-html like:

<p ng-bind-html="myHTML"></p>

For detailed information go through: https://docs.angularjs.org/api/ng/directive/ngBindHtml

Note: Don't forget to inject ngSanitize service in your app.

like image 55
Raj Kantaria Avatar answered Oct 03 '22 07:10

Raj Kantaria


You need to use the ngBindHtml directive that properly evaluates the expression and inserts the resulting HTML into the element in a secure way. To do this, you must include a reference to angular-sanitize.js in your HTML and then in your angular module, inject ngSanitize.

Like so

  var app = angular.module("Tabs", ['ngSanitize'])
     .controller("TabsController", ['$scope', function($scope){
        $scope.events = my_JS_object;
  })

 <div ng-controller="TabsController">
  <div ng-bind-html="events.test"></div>
 </div>

Here is a full working example:

(function(angular) {
  'use strict';
angular.module('bindHtmlExample', ['ngSanitize'])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.myHTML = 'Hello This is <b>BOLD<b/>';
  }]);
})(window.angular);
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular-sanitize.js"></script>
</head>
<body ng-app="bindHtmlExample">
  <div ng-controller="ExampleController">
     <p ng-bind-html="myHTML"></p>
  </div>
</body>

Refer to the official angular documentation for details: https://docs.angularjs.org/api/ng/directive/ngBindHtml

like image 40
Dayan Avatar answered Oct 03 '22 07:10

Dayan