Angularjs does not load scripts within ng-view
That's the way jqLite works. If you want scripts in templates to be evaluated, include jQuery before AngularJS. If jQuery is included, the script will be evaluated. Try removing jQuery, and you see the originally observed behavior.
Updated: since some people asked for elaboration in the comments, here it is:
When a route is matched, ngView
uses jqLite's (or jQuery's, if loaded) html()
method to set the content of the element (the one ngView
is declared on). In other words, ngView.link()
does something like this:
$element.html(template)
So it boils down to how html()
is implemented in jqLite and jQuery. jqLite uses the native innerHTML
property, which only sets content but doesn't evaluate scripts. jQuery, on the other hand, parses out all script tags and executes them (by constructing and appending script DOM elements to the page).
If I include my script that needs to work with the view, how can I trigger it when the view has loaded? I don't want to include jquery and/or fragmentate my script.
To execute the <script>
tag without loading jQuery, use jqLite to find the <script>
tag and then eval
the innerHTML
.
app.controller("vm", function($scope, $element) {
//FIND script and eval
var js = $element.find("script")[0].innerHTML;
eval(js);
});
The DEMO on PLNKR
See also AngularJS Issue #369 — jqLite should create elements in same way as jQuery