html tags not displaying using ng-bind-html in Angularjs

Question

I have html template like this:

I want to bind this template using "ng-bind-html", like below:

angular.module('bindHtmlExample', ['ngSanitize'])
  .controller('ExampleController', ['$scope', '$compile',
    function($scope, $compile) {
      var templateHTML =
        'I am an <code>HTML</code>string with ' +
        '<span class="pointer"><i class="icon-refresh pointer" ng-click="refresh()"></i></span>';
      $scope.myHTML = $compile(templateHTML)($scope);
    }
  ]);

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular-sanitize.js"></script>

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

nothing I'm getting. How to fix this.

I get this "Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See: docs.angularjs.org/api/angular.element errors.angularjs.org/1.3.0-rc.3/jqLite/nosel" — Phil
– Phil, Commented Sep 30, 2014 at 3:41

Arun P Johny · Accepted Answer · 2014-09-30 04:35:14Z

I think a possible solution here is to write your own directive like

angular.module('bindHtmlExample', ['ngSanitize'])
    .controller('ExampleController', ['$scope', '$compile', function ($scope, $compile) {
    var templateHTML =
        '<div>I am an <code>HTML</code>string with ' +
        '<span class="pointer"><i class="icon-refresh pointer" ng-click="refresh()">i</i></span></div>';
    $scope.myHTML = templateHTML;

    $scope.refresh = function () {
        console.log('refresh')
    };
}]);

angular.module('bindHtmlExample').directive('myHtml', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        link: function link($scope, $element, attrs) {
            attrs.$observe('myHtml', function (value) {
                var $el = $compile(value)($scope);
                $element.empty().append($el)
            })
        }
    }
}])

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular-sanitize.js"></script>

<div ng-app="bindHtmlExample">
    <div ng-controller="ExampleController">
        <p ng-bind-html-unsafe="myHTML"></p>
        <p ng-bind-html="myHTML"></p>
        <p my-html="{{myHTML}}"></p>
    </div>
</div>

alecxe · Accepted Answer · 2014-09-30 04:01:49Z

1

According to the Vojta's comment in this issue:

qLite throws when given a string that does not start with "<", it should trim the string first.

In other words, your HTML string have to be an "element" with an opening and closing tags.

Put the HTML string you have into a div container:

var templateHTML =
    '<div>I am an <code>HTML</code>string with ' +
    '<span class="pointer"><i class="icon-refresh pointer" ng-click="refresh()"></i></span></div>';

Also see:

$compile fails on leading whitespace of template string

answered Sep 30, 2014 at 4:01

alecxe

476k127 gold badges1.1k silver badges1.2k bronze badges

2 Comments

Arun P Johny Over a year ago

I don't think it will still work because myHTML is a wrapped dom object, not a string

alecxe Over a year ago

@ArunPJohny yes, I'm just trying to explain the $compile related error here. The motivation and what the OP is aiming to is not clear to me currently. Thank you.

Jennie Ji · Accepted Answer · 2014-09-30 04:34:09Z

When you use $complie it will return a jqLite object, not a HTML string. However, the value of the variable for ngBindHTML should be a string including HTML. That's why you can see nothing as result.

For your situation, it's better to use Directive than Controller to insert your HTML. See my Codepen: http://codepen.io/jennieji/pen/jhnCk

JS:

  angular.module('bindHtmlExample', ['ngSanitize'])
  .controller('ExampleController', ['$scope', '$interpolate',
    function($scope, $interpolate) {
      var templateHTML =
        'I am an <code>HTML</code>string with ' +
          '<span class="pointer"><i class="icon-refresh pointer" ng-click="refresh()">{{ bindText }}</i></span>';
      $scope.bindText = 'Refresh()';
      $scope.refresh = function() {
        console.log('refresh() runned.');
      };
      $scope.interpolate = $interpolate(templateHTML)($scope);
    }
  ])
  .directive('exampleDirective', ['$compile', function($compile){
    return function(scope, element){
       var templateHTML =
        '<p>I am an <code>HTML</code>string with ' +
          '<span class="pointer"><i class="icon-refresh pointer" ng-click="refresh()">{{ bindText }}</i></span></p>';
       element.append( $compile(templateHTML)(scope) );
    };
  }]);

HTML:

    <div ng-app="bindHtmlExample">
      <div ng-controller="ExampleController" example-directive>
        <p ng-bind-html-unsafe="interpolate"></p>
        <p ng-bind-html="interpolate"></p>
      </div>
    </div>

Collectives™ on Stack Overflow

html tags not displaying using ng-bind-html in Angularjs

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related