Ionic / Angular, pass JSON/Array value as HTML

Question

I am building a Mobile App using Ionic Framework and Angular. I have this array in my services JS (for this demo, only one value is passed):

  // Some fake testing data
  var articles = [{
    id: 0,
    title: 'This is the title',
    intro: 'This is the intro.',
    image: 'img/ben.png',
    published: '31/10/2016',
    text: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna lacus, aliquam sed ante vitae, ornare fermentum ipsum. Duis pellentesque.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna lacus, aliquam sed ante vitae, ornare fermentum ipsum. Duis pellentesque.</p>',
    url: 'http://www.domain.com/article'
  }];

And this is how my controllers JS looks like for this specific page:

.controller('NewsDetailCtrl', function($scope, $stateParams, Articles) {
  $scope.article = Articles.get($stateParams.articleId);
})

The HTML template looks like this:

<ion-view view-title="Article">
  <ion-content class="padding">
    <img ng-src="{{article.image}}" style="width: 64px; height: 64px">
    <p>
      {{article.text}}
    </p>
  </ion-content>
</ion-view>

Now, in the App, {{article.text}} is passed as it is, not as HTML. You can have a look at the image below:

How can I fix this? (Sorry if it's a noob question, I am just getting started with Angular)

Nikhil Mohanan · Accepted Answer · 2016-10-31 12:09:51Z

1

Either you can use

$scope.text= $sce.trustAsHtml(articles.text);
<p ng-bind-html="text"></p>

or write a directive like this,

(function() {
    'use strict'; 
    angular
        .module('app')
        .directive('dynamic', dynamic);

    dynamic.$inject = ['$compile'];

    function dynamic($compile) {
        return {
            restrict: 'A',
            replace: true,
            link: function (scope, ele, attrs) {
                scope.$watch(attrs.dynamic, function(html) {
                    ele.html(html);
                    $compile(ele.contents())(scope);
                });
            }
        };
    };
})();

answered Oct 31, 2016 at 12:09

Nikhil Mohanan

1,2601 gold badge12 silver badges23 bronze badges

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

Comments

laszczm · Accepted Answer · 2016-10-31 12:11:57Z

1

Use ng-BindHtml instead of ng-model. Content of ng-model is sanitized.

Please see examples on https://docs.angularjs.org/api/ng/directive/ngBindHtml

Alternatively you can use $sce.trustAsHtml():

$scope.html = '<p>html content</p>';
$scope.trustedHtml = $sce.trustAsHtml($scope.html);

For more see: https://docs.angularjs.org/api/ng/service/$sce

answered Oct 31, 2016 at 12:11

laszczm

1736 bronze badges

3 Comments

Andrei RRR Over a year ago

My controller for this specific page looks like this: .controller('NewsDetailCtrl', function($scope, $stateParams, Articles) { $scope.article = Articles.get($stateParams.articleId); }) What should I alter?

laszczm Over a year ago

.controller('NewsDetailCtrl', function($scope, $stateParams,$sce, Articles) { $scope.article = Articles.get($stateParams.articleId); $scope.htmlText = $sce.trustAsHtml($scope.article.text); })

laszczm Over a year ago

<ion-view view-title="Article"> <ion-content class="padding"> <img ng-src="{{article.image}}" style="width: 64px; height: 64px"> <p ng-bind-html="htmlText"> </p> </ion-content> </ion-view>

avck · Accepted Answer · 2016-10-31 12:03:26Z

0

You can use $sanitize the input and then bind using ng-bind-html.

Example is provided in the link above. $sanitize will give html without unsafe tokens.

answered Oct 31, 2016 at 12:03

avck

3,7233 gold badges30 silver badges38 bronze badges

Comments

Ujjwal kaushik · Accepted Answer · 2016-10-31 12:03:59Z

0

You need to use $sce service for this .. refer this

https://docs.angularjs.org/api/ng/service/$sce

$scope.text= $sce.trustAsHtml(articles.text);

And in your controller use it like this, Make sure you have injected $sce in your controller before using it

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

Thanks

answered Oct 31, 2016 at 12:03

Ujjwal kaushik

1,69613 silver badges18 bronze badges

Collectives™ on Stack Overflow

Ionic / Angular, pass JSON/Array value as HTML

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related