How to add ajax loaded content that contains an AngularJS expression with jquery

Question

I got stuck with these problem and hope you can point me in the right direction.

Here is the fiddle.

Explainer

1) I receive some template html via ajax request, everything works fine this is what it looks:

        <div>
            <h2 class="splash" ng-bind="view.headline || 'That&#039;s cool'"></h2>
        </div>

As you already know if the view.headline this will output That's cool

2) Adding the template to the dom (just pseudo code)

<div id="thisIsMyTemplatePlaceholder"></div>
<script>
var templateFromAjax="<h2 ng-bind=\"view.headline||'That&#039;s cool'\"></h2>";
$("#thisIsMyTemplatePlaceholder").html(templateFromAjax);
</script>

3) Inspect the added HTML you see three '(apostrophe) on the ng-bind attribute and this causes the my error

<div id="thisIsMyTemplatePlaceholder">
<h2 ng-bind="view.headline||'That's cool'"></h2>
</div>

4) The Problem seems to be the jQuery.html() function because it decodes the specialcharacters.

jquery is transforming this: 'That&#039;s cool' into 'That's'

You should not be mixing jQuery in with Angular, if you have a template you want to paste into a page, you should use a directive. So to solve your problem, use ng-include to paste your template. — SoluableNonagon
– SoluableNonagon, Commented Dec 21, 2015 at 15:15
Can you elaborate on how your call for the template looks like? What is the URL structure? — SoluableNonagon
– SoluableNonagon, Commented Dec 21, 2015 at 15:31

Community · Accepted Answer · 2017-05-23 12:31:02Z

1

Try escaping twice. One escape will be removed as html() unescapes your String, see here for reference.

'That\\'s cool'\">That's cool</h2>";

Now when you use .attr("ng-bind") the following will be the result

view.headline || 'That\'s cool

Is this your desired effect, or will only That's cool work?

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Dec 21, 2015 at 18:12

Clemens Himmer

1,3422 gold badges13 silver badges26 bronze badges

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

Comments

SoluableNonagon · Accepted Answer · 2015-12-21 15:24:47Z

1

Another way:

First, separate the template to another file, just easier that way:

myTemplate.html

<h2 ng-bind="view.headline || 'That\'s cool'"></h2> 
<!-- you can just escape the one apostraphe, but really, 
this logic doesn't belong in the html, but rather the 
controller or service which assigns a value to view.headline -->

Then you can include your template:

<div id="thisIsMyTemplatePlaceholder" ng-include="'myTemplate.html'"> </div>

A Plunker showing this working:

http://plnkr.co/edit/NlzTmlNMQCqHwqVxgCpQ?p=preview

answered Dec 21, 2015 at 15:24

SoluableNonagon

11.8k11 gold badges59 silver badges100 bronze badges

1 Comment

funktioneer Over a year ago

That's working, but I'm still looking for a way to do this with jquery. Thanks for the plankr!

SoluableNonagon · Accepted Answer · 2015-12-21 15:18:32Z

0

Have you tried:

<!-- you can just escape the one apostrophe -->
<h2 ng-bind="view.headline || 'That\'s cool'"></h2>

answered Dec 21, 2015 at 15:18

SoluableNonagon

11.8k11 gold badges59 silver badges100 bronze badges

Collectives™ on Stack Overflow

How to add ajax loaded content that contains an AngularJS expression with jquery

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related