2

我正在编写一个网站，我正在为使用 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>

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

4

2 回答 2

4

我认为你想要的应该做如下：

<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可用时将其删除！

于 2014-03-17T13:19:19.383 回答
1

编写一个扩展ng-bind-html了一些额外功能的自定义指令可能是一个解决方案......

这是我为现在使用而创建的PLUNKERng-bind-html-unsafe ，我对其进行编辑以等待更改属性以将 html 字符串替换为以前的内容...

于 2014-03-17T13:22:11.960 回答