Question

我需要输出两个HTML，第一个是表示我标题的div的开始标记，第二个是表示页脚的div的结束标记。在这两者之间我有动态内容，我无法控制。我希望headerHTML包含开头的div和CSS类以及用于关闭标题div的页脚来包装它们之间的所有内容。

<ng-bind-html ng-bind-html="headerHTML" />

<ng-bind-html ng-bind-html="footerHTML" />

因此渲染后应该看起来像：

<div class="myCSSClass">
   A bunch of dynamic content created between the two binds
</div>

但是，会发生什么：

<div class="myCSSClass">
</div>
   A bunch of dynamic content created between the two binds
<div>
</div>

问题是，当它不是内容的一部分时，它会自动添加headerHTML的结束标记。这会导致页面呈现不正确。是否有其他方法可以在不添加结束标记的情况下注入HTML内容？

Answer 1

在幕后，ng-bind-html指令使用Node.appendChild。这意味着它必须附加一个完整的元素。如果HTML省略了结束标记，则浏览器必须关闭该元素。这是DOM的工作方式。浏览器无法在两个.appendChild操作之间拆分开始和结束标记。

要执行您想要的操作，请使用转换内容的组件：

app.component("myComponent", {
    bindings: {
        headerHtml: '<',
        footerHtml: '<',
    },
    template: `
        <div class="myCSSClass">
            <div ng-bind-html="$ctrl.headerHtml"></div>
            <div ng-transclude></div>
            <div ng-bind-html="$ctrl.footerHtml"></div>  
       </div>
    `,
    transclude: true
});

用法：

<my-component header-html="headerHTML" footer-html="footerHTML">
   This content will be sandwiched between header and footer.
</my-component>

有关详细信息，请参阅

你如何防止ng-bind-html添加结束标签？

1 个答案:

用法：