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?

Jeanluca Scaljeri · Accepted Answer · 2014-03-17 13:19:19Z

4

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!

answered Mar 17, 2014 at 13:19

Jeanluca Scaljeri

29.6k68 gold badges240 silver badges389 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Over a year ago

That's a really nice solution. I'm going to hold up to see if there's something native that I'm missing out on, otherwise I'll mark this as the correct answer.

Poyraz Yilmaz · Accepted Answer · 2014-03-17 13:22:11Z

1

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

answered Mar 17, 2014 at 13:22

Poyraz Yilmaz

5,8671 gold badge28 silver badges28 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related