How to add downloaded ajax content containing AngularJS expression with jquery

Question

I am stuck with this problem and hope you can point me in the right direction.

Here is the fiddle .

explainer

1) I get some html template via ajax request, everything works fine, it looks like this:

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

As you already know, will view.headline output What is cool

2) Adding a template to dom (pseudo-code only)

<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) in the ng-bind attribute, and this causes my error

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

4) The problem seems to be the jQuery.html () function, because it decodes special characters.

jquery is transforming this: 'That's cool' into 'That's'

Answer 1

. , html() , . .

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

, .attr("ng-bind"),

view.headline || 'That\ cool

That's cool?

Answer 2

:

, :

myTemplate.html

<h2 ng-bind="view.headline || 'That\ 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 -->

:

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

A Plunker :

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

Answer 3

You tried:

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