内部HTML在angularjs NG绑定的HTML代码添加 [英] Inner html add by ng-bind-html in angularjs

问题描述

我用角指令产生引导的导航菜单。所有的东西都是好的，但是当我到达最后产生下拉菜单，然后我需要动态生成HTML。要生成HTML我已经用角NG绑定-HTML。角NG绑定，HTML是创建HTML非常好。吴绑定-HTML生成HTML看起来是这样的。

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>

不过，我只需要HTML看起来像下面不需要这个分区''。

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>

要生成HTML我使用的方法是这样的。

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;
        }
    };

完整的引导菜单code是

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.

推荐答案

您需要创建一个自定义指令

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);               
      }
    }
  }
}])

和使用指令添加到您的元素 UL ，而不是 DIV 。

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

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

更改您的控制器仅包括里取值

$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.

这篇关于内部HTML在angularjs NG绑定的HTML代码添加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！