javascript - 在默认 HTML 中使用 Angular 的 ng-bind-html

Question

我正在编写一个网站，我正在为使用 Angular 添加一种迷人的体验。该网站无需 JS 即可运行，但对于体面的浏览器，内容将以 HTML 片段的形式动态注入(inject)(无前端模板语言)。

我有一个代表页面内容的 block ，最初应该包含来自服务器的 html 内容，然后替换为来自 Ajax 函数的 HTML 片段。

我希望使用带有默认内容的 ng-bind-html，但是一旦 Angular 启动，这个元素就会被清空并替换为 pageContent 的内容ng-bind-html 绑定(bind)到的变量(如预期的那样。)

有什么方法可以阻止 ng-bind-html 在 Controller 中更新变量之前删除默认内容？

另一种选择是在引导 Angular 之前收集元素的内容，但我不认为这是一个非常优雅的解决方案。

我页面中的一些示例代码:

<div id="content" ng-bind-html="pageContent">

    <h2>Home page</h2>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>

</div>

理想情况下，#content div 中的 HTML 内容将保留在页面上，直到我更新 $scope.pageContent 变量。有什么想法吗？

Answer 1

我认为你想要的应该按如下方式完成:

<div ng-if="pageContent" id="content" ng-bind-html="pageContent"></div>
<div ng-if="!pageContent">
    <h2>Home page</h2>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>

</div>

或使用 ngSwitch

我认为您应该能够在元素上设置 display: none 并在 pageContent 可用时将其删除!