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

Question

我正在編寫一個網站，為使用Angular增添了迷人的體驗。 該網站可以在沒有JS的情況下運行，但對於不錯的瀏覽器，內容將以HTML代碼段的形式（無前端模板語言）動態注入。

我有一個代表頁面內容的塊，最初應該包含服務器中的html內容，然后用Ajax函數中的HTML代碼段替換。

我希望將ng-bind-html與默認內容一起使用，但是，一旦Angular Bootstraps將此元素清空，並替換為ng-bind-html綁定到的pageContent變量的內容（如預期的那樣）。

有什么方法可以阻止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>

理想的情況是在HTML內容#content股利仍將在頁面上，直到我更新$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

我認為您應該能夠設置顯示：元素上沒有顯示，並在pageContent可用時將其刪除！

Answer 2

編寫自定義指令以擴展ng-bind-html並添加一些其他功能可以解決此問題...

這是我為使用ng-bind-html-unsafe創建的PLUNKER ，現在我對其進行編輯，以等待更改屬性以將html字符串替換為先前的內容...