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

Question

我有两张HTML我需要输出第一个是代表我的header的div的开始标签，第二个是[的结束标签=26=] 表示页脚。在这两者之间，我有我无法控制的动态内容。我希望 headerHTML 包括开头 div 和 CSS class 以及关闭 header 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 添加结束标记？

How do you prevent ng-bind-html from adding closing tags?

angularjs

ng-bind-html

用法：