AngularJS rendering <br> as plain text not html

Question

I have downloaded a AngularJS template: https://github.com/bennkingy/angularJs-startbootstrap-modern-business

I am editing the slider on the homepage to show:
Welcome to Belcon
Lofts & Carpentry

However it is being displayed as plain text like this:

Welcome to belcon <br> Lofts & Carpentry

	  	$scope.active = 0;
		  var slides = $scope.slides = [
		  		{image: 'http://placehold.it/1900x455&text=Slide One', text: 'Welcome to belcon<br>alofts & carpentry', id: 0 },
	            {image: 'http://placehold.it/1900x455&text=Slide Two', text: 'Caption 2', id: 1 },
	            {image: 'http://placehold.it/1900x455&text=Slide Three', text: 'Caption 3', id: 2 },
				     {image: 'http://placehold.it/1900x455&text=Slide Four', text: 'Caption 4', id: 3 }	
		  ];

       <uib-carousel active="active" interval="slideInterval" no-wrap="noWrapSlides">
            <uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
                <img ng-src="{{slide.image}}" style="margin:auto;">
                <div class="carousel-caption">
                  <h2>{{slide.text}}</h2>
                </div>
            </uib-slide>
        </uib-carousel>

How would I go about making the text: html friendly?!

Thankyou.

Vivz · Accepted Answer · 2017-08-05 09:57:11Z

You can use $sce for this. You have to use ngSanitize directive of angular. Inject ngSanitize in your module and $sce in your controller.

angular.module('mySceApp', ['ngSanitize'])
  .controller('AppController', ['$http', '$templateCache', '$sce',
    function AppController($http, $templateCache, $sce) {
      var self = this;
        self.userComments = [
		  		{image: 'http://placehold.it/1900x455&text=Slide One', text: 'Welcome to belcon<br>alofts & carpentry', id: 0 },
	            {image: 'http://placehold.it/1900x455&text=Slide Two', text: 'Caption 2', id: 1 },
	            {image: 'http://placehold.it/1900x455&text=Slide Three', text: 'Caption 3', id: 2 },
				     {image: 'http://placehold.it/1900x455&text=Slide Four', text: 'Caption 4', id: 3 }	
		  ];
    }]);

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-sce-service-production</title>
  

  <script src="https://code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="https://code.angularjs.org/snapshot/angular-sanitize.js"></script>
  <script src="script.js"></script>
  

  
</head>
<body ng-app="mySceApp">
  <div ng-controller="AppController as myCtrl">
  <div class="well">
    <div ng-repeat="userComment in myCtrl.userComments">   
      <span ng-bind-html="userComment.text" class="htmlComment"> </span>
      <br>
    </div>
  </div>
</div>
</body>
</html>

From the Docs:

$sce is a service that provides Strict Contextual Escaping services to AngularJS.

For more reference

Bhanu Boppana · Accepted Answer · 2017-08-05 09:05:04Z

1

You have to use "ngSanitize" directive. Please refer the following link.

https://docs.angularjs.org/api/ngSanitize/service/$sanitize

answered Aug 5, 2017 at 9:05

Bhanu Boppana

1341 gold badge2 silver badges10 bronze badges

Comments

Martin Choraine · Accepted Answer · 2017-08-05 09:22:36Z

As a security for XSS vulnerability, HTML rendering is disable for angular. If you want to enable it for a block of it you should use $sanitize : https://docs.angularjs.org/api/ngSanitize/service/$sanitize.

Several exemples as follows :

<script>
  angular.module('sanitizeExample', ['ngSanitize'])
    .controller('ExampleController', ['$scope', '$sce', function($scope, $sce) {
      $scope.snippet =
        '<p style="color:blue">an html\n' +
          '<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' +
        'snippet</p>';
      $scope.deliberatelyTrustDangerousSnippet = function() {
        return $sce.trustAsHtml($scope.snippet);
      };
  }]);
</script>
<div ng-controller="ExampleController">
  Snippet: <textarea ng-model="snippet" cols="60" rows="3"></textarea>
  <table>
    <tr>
      <td>Directive</td>
      <td>How</td>
      <td>Source</td>
      <td>Rendered</td>
    </tr>
    <tr id="bind-html-with-sanitize">
      <td>ng-bind-html</td>
      <td>Automatically uses $sanitize</td>
      <td><pre>&lt;div ng-bind-html="snippet"&gt;<br/>&lt;/div&gt;</pre></td>
      <td><div ng-bind-html="snippet"></div></td>
    </tr>
    <tr id="bind-html-with-trust">
      <td>ng-bind-html</td>
      <td>Bypass $sanitize by explicitly trusting the dangerous value</td>
      <td>
      <pre>&lt;div ng-bind-html="deliberatelyTrustDangerousSnippet()"&gt;
      &lt;/div&gt;</pre>
      </td>
      <td><div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div></td>
    </tr>
    <tr id="bind-default">
      <td>ng-bind</td>
      <td>Automatically escapes</td>
      <td><pre>&lt;div ng-bind="snippet"&gt;<br/>&lt;/div&gt;</pre></td>
      <td><div ng-bind="snippet"></div></td>
    </tr>
  </table>
</div>

Rajat · Accepted Answer · 2017-08-05 18:51:49Z

0

First, add ngSanitize to the module dependencies.

Then bind the 'text' property to the h2 element using the directive ngBindHtml like this:

  <h2 ng-bind-html="text"></h2>

answered Aug 5, 2017 at 18:51

Rajat

6923 gold badges9 silver badges16 bronze badges

Collectives™ on Stack Overflow

AngularJS rendering <br> as plain text not html

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related