1.2.0rc1 regression: script tags not loaded via ngInclude

[kamstrup]

If one loads jQuery before Angular, loading and execution of script tags in the html fragments with ngInclude works under 1.0.* (just tested 1.0.7 here with jq 1.10.2). This is broken in 1.2.0rc1

[meznaric]

Similar question appeared on SO http://stackoverflow.com/questions/18457804/ng-include-stopped-working-after-update-to-1-2-0rc1

[kamstrup]

Tested with snapshot (1.2.0-6b91aa0) from 26-08-2013, which reportedly fixed the issue where ngInclude was broken with ngRepeat; but it doesn't seem to fix this particular issue.

[IgorMinar]

@matsko can you please take a look at this?

this previously worked only by accident because jQuery evaluated scripts found html to be passed to #html() function. this feature never worked with jqLite.

[matsko]

Taking a look in the morning tomorrow.

[njs50]

problem stems from /src/ng/animate.js : enter() using the insertBefore() method instead of jQuery/jqLite after() or append(). Would be an issue with any other animate.enter() w/embedded script.

src/ng/directive/ngInclude.js line 194
src/ng/animate.js line 99

looks non trivial to fix due to other animation related things depending on the insertBefore() having been used

[matsko]

yeah insertBefore() was a new addition for the animation rewrite. I'll try to see if it can be removed.

[njs50]

I switched it out to .append() and .after() and it broke j ~160 tests. I think because the element was being mutated by them.

[olostan]

Wow... this is not a good news... some of 3rd party components I'm using in a project built with AngularJS use <script> tag to adjust some properties and I've put that into <script> tags inside of partials....

This is breaking issue for me before switching to 1.2 from 1.1.*.... Is there any ideas how it could be solved? May be import code, that stripped/evaluated <script> tags from jQuery?

[btford]

The following test works in master, as well as 1.2.0-6b91aa0:

window.evaluated = false;
$templateCache.put('tpl', [200, '<script>window.evaluated = true;</script>', {}]);
element = $compile(html(
  '<div><div ' +
    'ng-include="\'tpl\'">' +
  '</div></div>'
))($rootScope);
$rootScope.$digest();
$animate.flushNext('enter');

expect(window.evaluated).toBe(true);

@kamstrup, can you make a fiddle/plunker that shows the issue?

[btford]

The behavior of jQuery has changed since 1.9.0 and they are not supporting this feature anymore.

If you want to preserve this behavior and use a newer version of jQuery, you could decorate ngInclude to eval the contents of scripts after a template is resolved. I would recommend re-evaluating your strategy for asynchronously loading content, and coming up with a better solution.

[njs50]

jQuery still supports this btw, the only change is that they no longer remove the script tag from the dom after executing it.

jQuery release notes: As of 1.9, scripts inserted into a document are executed, but left in the document and tagged as already executed so they won't be executed again even if they are removed and reinserted.

my workaround was to copy/rename the pre animation version of ng-include. At the moment it's just being used to load a bunch of old (pre angular) content into the views and one day someone will have time to update them all and we can ditch it.

@btford, I tried your test in both master and 1.2.0-6b91aa0 and both failed. Looking at the code it seems $animate.enter() is still using insertBefore(), so no jQuery call at all. Not sure how the tests could of passed given that?

here's a plunker showing the issue : http://plnkr.co/edit/FyJX8Q7qvfWb0BZwLF2g?p=preview

[olostan]

If desired behaviour couldn't be achieved, may be it would be good to put this note into documentation? I assume some developers could expect this behavior as it is in JS (even without removing executed script as it is in 1.9+).