How to insert a variable has html to ionic & angular template file?

Question

I have an ionic & angular based project. I get variable node from a service. node's body value is HTML. But when I print {{node.body.und[0].value}} with ionic, it prints HTML codes with tags like <ul><li>Title: some text</li><ul>

Controller and service part of the code:

.controller('NodeCtrl', function($scope, $stateParams, Node) {
    $scope.node = Node.get({nid: $stateParams.nid});
});

.factory('Node', function ($resource) {
    return $resource('some-domain.com/api/node/:nid'+'.json');
})

Ionic template:

<ion-view view-title="{{node.title}}">
  <ion-content>
    <div class="list card">
      <div class="item">
        <h2>{{node.title}}</h2>
      </div>
      <div class="item item-body">
        {{node.body.und[0].value}}
      </div>
    </div>
  </ion-content>
</ion-view>

How can I make ionic print {{node.body.und[0].value}} as HTML instead of with HTML tags like <ul><li>Title: some text</li><ul>?

example

"How can I make ionic print {{node.body.und[0].value}} as HTML instead of with HTML tags like <ul><li>Title: some text</li><ul>" ... I am assuming you mean how can you get it to print as text? Because it is printing it as HTML if you get the tags. — khollenbeck
– khollenbeck, Commented Oct 28, 2015 at 16:49
Have you looked at ng-bind-html ? docs.angularjs.org/api/ng/directive/ngBindHtml — Will.Harris
– Will.Harris, Commented Oct 28, 2015 at 16:56
I have changed it as  and it worked as I wanted. Thanks — coolman
– coolman, Commented Oct 28, 2015 at 17:28

Kailas · Accepted Answer · 2016-02-26 06:13:39Z

3

All Credits to Will.Harris!!

ng-bind-html, is what you are looking for.

From the Docs, use the ng-bind-html in the view as:

<div ng-controller="ExampleController">
 <p ng-bind-html="myHTML"></p>
</div>

and in the controller, assign the scope variable with the html content as:

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>';
}]);

answered Feb 26, 2016 at 6:13

Kailas

7,6183 gold badges50 silver badges65 bronze badges

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

Collectives™ on Stack Overflow

How to insert a variable has html to ionic & angular template file?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest