angular bind html tags from controller to html view

Question

I need to render the $scope.htmlView tags in to html view.

I already tried using ng-bind-html. It renders the html tags but scope variable values will not appear.

How can I render both html tags and and scope variable values?

This is the controller:

$scope.newObj = {
  billStatus : true;
  eventTime : "2015-01-10"
};

$scope.htmlView = '<p>{{newObj.eventTime}}</p>    <div style="margin-top: -15px;"><md-checkbox ng-checked="{{newObj.billStatus}}" style="margin-left: 0px;" aria-label="Bilable"><span style="margin-left:0px;">Bilable</span> </md-checkbox></div>'

Expected result is:

<p> 2015-01-10</p> 
<div style="margin-top: -15px;">
  <md-checkbox ng-checked="true" style="margin-left: 0px;" aria- label="Bilable">
    <span style="margin-left:0px;">Bilable</span>
  </md-checkbox>
</div>

I search over the internet over days and still could't find out a way to figure out this. please help me. thank you.

Did you try doing this $sce.trustAsHtml(string) trustAsHtml? — Rakesh Chand
– Rakesh Chand, Commented Jun 23, 2016 at 7:15
Check this question stackoverflow.com/questions/17417607/… — Juanín
– Juanín, Commented Jun 23, 2016 at 7:19
Check updated answer. If you need variables, you have to use $compile to evaluate them — Drag13
– Drag13, Commented Jun 23, 2016 at 8:13

Drag13 · Accepted Answer · 2016-06-23 07:23:23Z

1

You have to do 2 things.

Use data-ng-bind-html=""
Use $sce.trustAsHtml(string)

UPDATED: If you wont to use angular expressions, you have to compile them using

$compile.

You can read more via this $SCE

answered Jun 23, 2016 at 7:23

Drag13

6,0281 gold badge22 silver badges44 bronze badges

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

Comments

Vivek Singh · Accepted Answer · 2016-06-23 07:25:26Z

0

I will tell you a long way but it will help you.Make a custom directive like this.

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

Use as

<span  dynamic="{{htmlView}}" >

answered Jun 23, 2016 at 7:25

Vivek Singh

1691 silver badge4 bronze badges

1 Comment

Sachila Ranawaka Over a year ago

so basically to convert string into html template i need to use $compile. right ??

Gayathri Mohan · Accepted Answer · 2016-06-23 07:30:49Z

0

Hi please check this fiddle https://plnkr.co/edit/iqNltdDYv2n9Agke0C2C?p=preview

HTML

  <div ng-controller="ExampleController">
      <p >{{newObj.eventTime}}</p>
       <p dynamic="htmlView"></p>
</div

and JS

(function(angular) {
  'use strict';
angular.module('bindHtmlExample', ['ngSanitize'])
  .controller('ExampleController', ['$scope', function($scope) {

       $scope.newObj = {
      billStatus : true,
      eventTime : "2015-01-10"
}

$scope.htmlView = '<p> {{newObj.eventTime}}</p> <div style="margin-top: -15px;">Hello <md-checkbox ng-checked="{{newObj.billStatus}}" style="margin-left: 0px;" aria-label="Bilable"><span style="margin-left:0px;">Bilable</span> </md-checkbox></div>'
  }])

  .directive('dynamic', function($compile) {
    return {
        restrict: 'A',
        replace: true,
        link: function (scope, element, attrs) {
            scope.$watch(attrs.dynamic, function(html) {
                element[0].innerHTML = html;
                $compile(element.contents())(scope);
            });
        }
    };
});
})(window.angular);

answered Jun 23, 2016 at 7:30

Gayathri Mohan

2,9724 gold badges21 silver badges26 bronze badges

2 Comments

Sachila Ranawaka Over a year ago

can u please explain the purpose of ngSanitize

Gayathri Mohan Over a year ago

that one no need if u remove also it will be work fine

Collectives™ on Stack Overflow

angular bind html tags from controller to html view

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related