How to parse HTML content of a variable in Angular.JS?

Question

I am new to Angular.JS & are currently working on my first project. I have a page full of entries of the kind

<h1>Title</h1>
<p>Teaser</p>
<p>(a link)</p>

The teaser may include HTML formating or elements like the &. What I want to do is to "parse" this Teaser so that the formating is "understood" properly by the browser (currently Google Chrome).

For the detail page, an id is passed to the shownews, but the first call is without an id to read all the news from where, the user can reach the detail page by each news link. Here, I already head the same problem. Below, you see the Angular.JS code for both the main news page and the detail page, where I could solve the problem for the detail page by using the ng-bind-html directive as follows:

	$scope.shownews = function(id) {

	  if (typeof id === 'undefined') {
	    $http({
	      method: 'GET',
	      url: 'http://dev.ivm.at/getallnews.php'
	    }).
	      success(function(data, status, headers, config) {
	        $scope.allnews = data;
	        $scope.myHTML = [];

	        for (var i = 0; i < $scope.allnews.length; i++) {
	          $scope.myHTML[i] = $scope.allnews[i].Teaser;
	        }
	      });
	  } else {
	    $http({
	      method: 'GET',
	      url: 'http://dev.ivm.at/getnews.php?ID=' + id
	    }).
	      success(function(data, status, headers, config) {
	        $scope.singlenews = data;
	        $scope.Newstitel = $scope.singlenews[0].Title
            //[...]
	        $scope.Inhalt = $scope.singlenews[0].Inhalt;
	        //[...]
	        $scope.myHTML = "<h1>" + $scope.Newstitel + "</h1><br>" + $scope.Inhalt;
	      });
	  }
	}

<div data-role="page" id="allnews">
  <div id="sub">
    <section class="blog">
      <article ng-bind-html="myHTML" ng-repeat="news in allnews">
        <h1>{{news.Title}}</h1>
        <p>{{myHTML[$index]}}</p>
        <p class="readmore">
          <a href="onenews" ng-click="shownews(news.ID)">
                  Weiterlesen: {{news.Title}}
          </a>
          <span class="readmore_icon"></span>
        </p>
      </article>
    </section>
  </div>
</div>

My question is how to use the ng-bind-html command properly so that it does parse the $scope.myHTML in the case it is an array of texts.

Thank you for your answer!

instead of parsing array, just give require field to the ng-bind-html. example:<p ng-bind-html=""> — Gayathri
– Gayathri, Commented May 27, 2015 at 12:51
How can I do that? I do not know the number of news that are on the main page. Each news has a teaser. In the case of detail page with the only news, this is not a problem. I create the $scope.myHTML, which is a string in this case and not an array, inside the controller (see above). — Sae1962
– Sae1962, Commented May 28, 2015 at 7:18

Kareem Elshahawy · Accepted Answer · 2015-05-27 13:30:14Z

4

To do this you need to use $sceangularjs built-in service to secure the HTML content before parsing.

Example

HTML View:

<span ng-bind-html="toTrustedHTML(html)">

Controller:

angular.module('myModule').controller('myController', function($scope, $sce){
  $scope.toTrustedHTML = function (html) {
    return $sce.trustAsHtml(html);
  };
});

UPDATE:

You might need to use ngSantize and also check the following URL which contain a plunker explains that you need $sce.trustAsHtml() method.

edited May 27, 2015 at 13:30

answered May 27, 2015 at 12:48

Kareem Elshahawy

1,4211 gold badge12 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sae1962 Over a year ago

Oh, the trust is not my current concern. What I need is text inside the array variable $scope=myHTML[] being formatted properly. I still do have the ampersand written as &. Actually, I already have the solution for the single news without securing it, and it works.

Kareem Elshahawy Over a year ago

@Sae1962: you may need to check the current update I just added to the answer

Sae1962 Over a year ago

Thank you! I changed following lines: var app = angular.module("MyApp", ['ngSanitize']);, app.controller("PostsCtrl", function($scope, $http, $sce) {..., and $scope.toTrustedHTML = function (html) { return $sce.trustAsHtml(html); }, but get the error message Error: Unknown provider: $sceProvider <- $sce (angular.js:5601). In the HTML file, I added also <script src="lib/angular/angular-sanitize.min.js"></script> after the line with <script src="lib/angular/angular-sanitize.js"></script>. What do you think causes the error?

Sae1962 Over a year ago

Forgotten changes in HTML file: <span ng-bind-html="toTrustedHTML(html)"> before <article ng-repeat="news in allnews"> & the closing </span>.

Kareem Elshahawy Over a year ago

Why do you need this part myHTML[$index]? Also, you are including angular-sanitize twice!! try it only once (either minified or full version)

|

Collectives™ on Stack Overflow

How to parse HTML content of a variable in Angular.JS?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related