Question

我正在写一个网站，我正在添加一个使用Angular的迷人体验。该网站不使用JS，但对于体面的浏览器，内容将以HTML片段的形式动态注入（无前端模板语言）。

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

我希望将ng-bind-html与默认内容一起使用，但只要Angular引导，此元素将被清空并替换为pageContent绑定到的ng-bind-html变量的内容（正如所料。）

在控制器中更新变量之前，有没有办法阻止ng-bind-html删除默认内容？

另一个选择是在引导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可用时将其删除！

Answer 2

使用一些额外的函数编写扩展ng-bind-html的自定义指令可以是一个解决方案......

这是我使用ng-bind-html-unsafe创建的PLUNKER现在我编辑它以等待更改属性以用以前的内容替换html字符串...

使用Angular的ng-bind-html和默认的HTML

2 个答案: