CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Links
Links

Reputation: 227

How to display html data in my app?

I am using Angular framework to populate my data in my app.

my data contains html tag

It's something like

$scope.test = <p>this is a test<?p><strong>Bold text here...</strong>

In my html

<div>
   {{test}}
</div>

The output on browser show exact text '<p>this is a test</p> <strong>Bold text here...</strong>'. I want it to parse html tag and show'

this is a test

Bold text here....

Is that possible?

Thanks a lot!

Upvotes: 0

Views: 84

Answers (2)

Sagar Kanabar
Sagar Kanabar

Reputation: 464

Make directive for parsing text to html content. like

app.directive('bindUnsafeHtml', ['$compile', function ($compile) {
      return function(scope, element, attrs) {
            console.log("in directive");
          scope.$watch(
            function(scope) {
              // watch the 'bindUnsafeHtml' expression for changes
              return scope.$eval(attrs.bindUnsafeHtml);
            },
            function(value) {
              // when the 'bindUnsafeHtml' expression changes
              // assign it into the current DOM
              element.html(value);

              // compile the new DOM and link it to the current
              // scope.
              // NOTE: we only compile .childNodes so that
              // we don't get into infinite loop compiling ourselves
              $compile(element.contents())(scope);
            }
        );
    };
}]);

After that you can use like:

 <div bind-unsafe-html="test">

Don't forgot to inject your directive in the config of angular

Hope this will help you.

Upvotes: 1

dave
dave

Reputation: 64657

You can either do:

<div ng-bing-html-unsafe="test"></div>

or

$scope.test = $sce.trustAsHtml('<p>this is a test<?p><strong>Bold text here...</strong>');

Depending on what you need to do and what version of angular you are using. Just saw you said 1.2, so most likely the last one. And for the $sce one you obviously need to inject $sce:

myApp.controller('myCtrl', ['$scope', '$sce', function($scope, $sce) {
   $scope.test = $sce.trustAsHtml('<p>this is a test<?p><strong>Bold text here...</strong>');
});

Upvotes: 2

Related Questions