在 angularjs 中通过 ng-bind-html 添加内部 html [英] Inner html add by ng-bind-html in angularjs

问题描述

我正在使用 angular 指令生成引导程序导航菜单.所有的事情都很好，但是当我最终生成下拉菜单时，我需要动态生成 HTML.为了生成 HTML，我使用了 angular ng-bind-html.angular ng-bind-html 可以很好地创建 HTML.ng-bind-html 生成的 HTML 看起来像这样.

<ul class="dropdown-menu" role="menu"><li><a href="#">动作</a></li><li><a href="#">另一个动作</a></li><li><a href="#">这里还有别的东西</a></li><li class="divider"></li><li><a href="#">分隔链接</a></li><li class="divider"></li><li><a href="#">一个单独的链接</a></li>

但我只需要看起来像下面的 HTML 不需要这个 div ''.

<li><a href="#">动作</a></li><li><a href="#">另一个动作</a></li><li><a href="#">这里还有别的东西</a></li><li class="divider"></li><li><a href="#">分隔链接</a></li><li class="divider"></li><li><a href="#">一个单独的链接</a></li>

为了生成 HTML，我使用的方法如下所示.

$scope.getDropdownMenu = 函数(菜单){尝试 {var dropdownMenu = '
'+'<li><a href="#">动作</a></li>'+'<li><a href="#">另一个动作</a></li>'+'<li><a href="#">这里还有别的东西</a></li>'+'<li class="divider"></li>'+'<li><a href="#">分隔链接</a></li>'+'<li class="divider"></li>'+'<li><a href="#">一个单独的链接</a></li>'+'</ul>';var trustHtml = $sce.trustAsHtml(dropdownMenu);返回trustedHtml；}赶上(e){扔e;}};

完整的引导菜单代码是

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

那么我怎样才能删除我不需要的那个潜水.有什么办法吗谢谢.

解决方案

您需要创建自定义指令

Plunker

app.directive('ngHtmlSafe',['$sce',function($sce){返回 {replace: true,/* 不要用你的自定义指令替换父元素 */模板:'template.html'，限制:'A'，范围: {文字:'='},链接:功能(范围，EL，属性){scope.safe = $sce.trustAsHtml(scope.text)/* 从你添加指令的元素中复制所有父属性 */for (var i=0; i < attrs.length; i++) {el.attr(attrs.item(i).nodeName, attrs.item(i).nodeValue);}}}}])

并使用 ul 而不是 div 将指令添加到您的元素.

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

将您的控制器更改为仅包含 lis

$scope.getDropdownMenu = 函数(菜单){尝试 {var dropdownMenu = '<li><a href="#">Action</a></li>'+'<li><a href="#">另一个动作</a></li>'+'<li><a href="#">这里还有别的东西</a></li>'+'<li class="divider"></li>'+'<li><a href="#">分隔链接</a></li>'+'<li class="divider"></li>'+'<li><a href="#">一个单独的链接</a></li>';var trustHtml = $sce.trustAsHtml(dropdownMenu);返回trustedHtml；}赶上(e){扔e;}};

这将基本上替换您附加指令的元素.所以可能有更好的方法让它更通用，但这适用于您的用例.

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.

解决方案

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.

这篇关于在 angularjs 中通过 ng-bind-html 添加内部 html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！