Inner html add by ng-bind-html in angularjs

Question

I am generating bootstrap navigation menu by using angular directive. All of the things were Ok but when I reached finally to generate dropdown menu then I need to generate HTML dynamically. To generate HTML I have used angular ng-bind-html. The angular ng-bind-html is creating HTML very well. The ng-bind-html generating HTML looks like this.

<div ng-bind="getDropdownMenu(submenu)">
  <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
      <li class="divider"></li>
      <li><a href="#">One more separated link</a></li>
   </ul>
</div>

But I need only HTML looks like below no need this div ''.

<ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
    <li class="divider"></li>
    <li><a href="#">One more separated link</a></li>
</ul>

To generate HTML I have used method looks like this.

$scope.getDropdownMenu = function (menu) {
  try {                
      var dropdownMenu = '<ul class="dropdown-menu" role="menu">' +
      '<li><a href="#">Action</a></li>' +
      '<li><a href="#">Another action</a></li>' +
      '<li><a href="#">Something else here</a></li>' +
      '<li class="divider"></li>' +
      '<li><a href="#">Separated link</a></li>' +
      '<li class="divider"></li>' +
      '<li><a href="#">One more separated link</a></li>' +
       '</ul>';
        var trustedHtml = $sce.trustAsHtml(dropdownMenu);
            return trustedHtml;
        } catch (e) {
            throw e;
        }
    };

The full of bootstrap menu code is

<ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
        <div ng-bind-html="getDropdownMenu(submenu)"></div>
    </li>
</ul>

So how can i remove That dive which is no need to me. Is there any way Thanks.

I'm not sure what your actual question is, but since you're generating HTML markup within your javascript function, you probably want [`ng-bind`](https://docs.angularjs.org/api/ng/directive/ngBind) instead of `ng-bind-html`. The latter will escape the angle brackets. — Dan, Aug 31 '14 at 04:14
Hi @Dan, yes I want to generate Inner HTML by this method getDropdownMenu(submenu). ng-bind supports string but I need HTML. — Shohel, Aug 31 '14 at 04:24
Not sure what the problem is... [Works HERE](http://plnkr.co/edit/tT2oLYQZXZoJvXgIFETv?p=preview) — bluetoft, Aug 31 '14 at 04:35
I think that div is the least of what's wrong with your code... There's simpler ways to achieve what you're trying to do. — rcorrie, Aug 31 '14 at 06:19

bluetoft · Accepted Answer · 2014-08-31T05:58:18.697

You'll need to create a custom directive

Plunker

app.directive('ngHtmlSafe',['$sce',function($sce){
  return {
    replace: true, /* don't use the parent element replace with your custom directive */
    template: 'template.html',
    restrict: 'A',
    scope: {
      text: '='
    },
    link: function(scope,el, attrs){
      scope.safe = $sce.trustAsHtml(scope.text)

      /* copy all parent attributes from the element you added the directive to */
      for (var i=0; i < attrs.length; i++) {
         el.attr(attrs.item(i).nodeName, attrs.item(i).nodeValue);               
      }
    }
  }
}])

and add the directive to your element using ul instead of a div.

<ul ng-html-safe text="getDropdownMenu(submenu)"></ul>

Change your Controller to only include the lis

$scope.getDropdownMenu = function (menu) {
  try {                
      var dropdownMenu = '<li><a href="#">Action</a></li>' +
      '<li><a href="#">Another action</a></li>' +
      '<li><a href="#">Something else here</a></li>' +
      '<li class="divider"></li>' +
      '<li><a href="#">Separated link</a></li>' +
      '<li class="divider"></li>' +
      '<li><a href="#">One more separated link</a></li>';
        var trustedHtml = $sce.trustAsHtml(dropdownMenu);
            return trustedHtml;
        } catch (e) {
            throw e;
        }
    };

This will essentially replace the element you attach your directive to. So there's probably a better way to make it more generic but this works for your use case.

No this is not working. In this way the method getDropdownMenu(submenu) returns only string. I have to tagged as a HTML. — Shohel, Aug 31 '14 at 05:06

score 0 · Answer 2 · edited Feb 13 '20 at 20:36

0

For HTML, you will need to bind to the property

Solution :

<div class="blog-post" [innerHtml]="testhtml"></div>

Note I moved the [innerHtml] to inside the div tag.

Leaving out the square brackets would bind to the attribute, so you would need to interpolate again

edited Feb 13 '20 at 20:36

luis.parravicini

1,214
11
19

answered Dec 03 '19 at 07:44

Supriya

481
5
5

Inner html add by ng-bind-html in angularjs

2 Answers2

Linked