Using Angular's ng-bind-html with default HTML

Question

I'm writing a website that I'm adding an enchanted experience to using Angular. The site works without JS but for decent browsers content will be dynamically injected in the form of HTML snippets (no front-end templating language).

I have a block that will represent the page content, and should contain html content from the server initially, and then be replaced with a HTML snippet from an Ajax function.

I was hoping to use ng-bind-html with default content in, however as soon as Angular bootstraps this element is emptied and replaced with the content of the pageContent variable that ng-bind-html binds to (as expected.)

Is there any way to stop ng-bind-html from removing the default content until the variable is updated in the controller?

Another option would be to collect the contents of the element before bootstrapping Angular but I don't see this as a very elegant solution.

Some sample code from my page:

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

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

</div>

Ideally the HTML content in the #content div would remain on the page until I update the $scope.pageContent variable. Any ideas?

Answer 1

I think that what you want should be done as follows:

<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>

or with ngSwitch

I think you should be able to set display: none on an element and remove it when pageContent is available!

Answer 2

Writing a custom directive which extends ng-bind-html with some extra functions can be a solution...

here is a PLUNKER which I created for using ng-bind-html-unsafe now I edit it to wait fir changing atribute to replace html string with previous content...