current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:
up vote 0 down vote favorite

I am new to angularjs and using this directive as below. When this directive gets loaded on HTML file, it should treat these HTML as actual HTML rather than string but it is not working. I am using angular 1.4.7 version.

Please help!! I am adding below HTML as String because I am getting that HTML as String from service dynamically. So this is just example that I am adding here to see how can we display html value on angular html if it is coming as string.

angular.module('my.directive', [])
    .directive("myDirective", function(){
        return {
            restrict: "EA",
            scope: false,
            template: "<div class='con'>"+
            "<div>'<p><i><strong>some text</strong></i></p>'</div>"+
            "</div>"
        };
    });

I have tried multiple ways to fix it here but no luck. I have tried using "ng-bind-html-unsafe" and "ng-bind-html" but none of them works correctly.

I have even tried using direct HTML with ng-bind-html and unsafe as well but no luck there as well.

I have simply tried below HTML but that doesn't work as well.

<div ng-repeat="list in lists">
    <div class="content">
        <div ng-bind-html='<p><i><strong>some text</strong></i></p>'></div>
    </div>
</div>

Also below doesn't work.

<div ng-repeat="list in lists">
    <div class="content">
        <div ng-bind-html-unsafe='<p><i><strong>some text</strong></i></p>'></div>
    </div>
</div>
share|improve this question

2 Answers 2

up vote 0 down vote accepted

I did some modifications in your code.

template: "<div class='con'>" +
                "<div><p><i><strong>some text</strong></i></p></div>" +
                "</div>"

AnuglarJS - Directives

The restrict option is typically set to:

  • 'A' - only matches attribute name
  • 'E' - only matches element name
  • 'C' - only matches class name

In your directive, you have this restriction: restrict: "EA", then you can use as element:

<my-directive></my-directive>.

(function() {
  angular.module('my.directive', [])
    .directive("myDirective", function() {
      return {
        restrict: "EA",
        scope: false,
        template: "<div class='con'>" +
          "<div><p><i><strong>some text</strong></i></p></div>" +
          "</div>"
      };
    })
    .controller("Controller", ["$scope",
      function($scope) {
        $scope.title = "my-directive";
        $scope.lists = [{
          "id": 1,
          "text": "1"
        }, {
          "id": 2,
          "text": "2"
        }];
      }
    ]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="my.directive">
  <div data-ng-controller="Controller">
    <h1 data-ng-bind="title"></h1>

    <div data-ng-repeat="list in lists">
      <div class="content">{{list.id}}
        <my-directive></my-directive>
      </div>
    </div>
  </div>
</div>

jsFiddle

Update: Using ngSanitize:

https://docs.angularjs.org/api/ngSanitize

In your current markup, you need to add double quoutes ".

<div data-ng-bind-html="'<p><i><strong>some text</strong></i></p>'"></div>

And add the ngSanitize dependency in your module.

Something like this:

(function() {
  angular.module("my.directive", ["ngSanitize"])
    .controller("Controller", ["$scope",
      function($scope) {
        $scope.title = "my-directive";
        $scope.lists = [{
          "id": 1,
          "text": "1"
        }, {
          "id": 2,
          "text": "2"
        }];
      }
    ]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-sanitize.min.js"></script>
<div data-ng-app="my.directive">
  <div data-ng-controller="Controller">
    <h1 data-ng-bind="title"></h1>

    <div ng-repeat="list in lists">
      <div class="content">
        <div data-ng-bind-html="'<p><i><strong>some text</strong></i></p>'"></div>
      </div>
    </div>
  </div>
</div>

share|improve this answer
    
Thank you for this answer but I think my question is little bit confusing. I don't think I can simply remove '' from HTML string that I have as that HTML is coming from my service dynamically. I have just hardcoded that value there as to make sure question is less complex. Sorry for confuse here but my point is, if I am getting this HTML values as String on my controller/ on directive from service than how do I render those values as HTML? – ree 15 hours ago
    
I have edited question again and specified some details so it is less confusing. Thank you for the answer here. Please help further to resolve this. I have tried many stuffs here but no luck yet. Please help. – ree 15 hours ago
    
I've updated my answer. Sorry for the confusion. I hope this helps. Also, check about the $sce service: docs.angularjs.org/api/ng/service/$sce. – Danny Fardy Jhonston Bermúdez 12 hours ago
    
Thank you so much. This works like charm. Really appreciate your help here. :) – ree 11 hours ago
up vote 0 down vote

To load HTML from a string, you need to add the ngSanitize module.

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-sanitize.js"></script>

<script>
   angular.module("myApp",["ngSanitize"])
     .controller("myController",["$scope", function($scope){

        $scope.myHtmlFromServer ="Example <b>boldly</b>";

   }]);
<script>

<div ng-app="myApp" ng-controller="myController">
    {{myHtmlFromServer}}
    <p ng-bind-html="myHtmlFromServer">
    </p>
</div>

An example running on JSFiddle

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.