Inner html add by ng-bind-html in angularjs

Issue

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.

Solution

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.

Answered By - bluetoft