My problem is, when Angular load templateUrl (through $routeProvider) inside ng-view it doesn't evaluate all javascript as well. I tried to figure it out, but now i'm really confused. During my search i found a lots of new topic, and i've lost in them. Any idea?
Tale
I tried to figure it out if anybody else met this problem before, or if there are any solution for this problem. The way i've found was something like "lazy-loading" directives or using requirejs, but i'm not sure if those tools are really solves this problems.
As Buu Nguyen mentioned in this thread
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.
I've tried, including jquery before angularjs but doesn't cause any effect at all. There are sevaral threads i read, for example
but nothing lead to solution (maybe i've missed a thing). And i think, this is not even my problem. I don't want to (re)load javascript files, i just want to force evaluate my bootstrap.
Honestly i'm really confused now. Afterward first time i met RequireJS. (lazy loading, and friends, again)
I've watched Thomas Burleson's video on youtube and i nearly understand what is it. And i looked much more articles in topic (because i found it's interest) but solution should be somewhere else.
Here is the situation
While i'm working on my angularjs app, i've made a partial site as separated .html file (just in case) and it seems pretty. Then i cut this .html file to pieces (header, top-menu, content, footer) and use its body tag as div inside a partial urlTemplate.
<body ng-app="myApp" id="page-top">
<div class="wrapper">
<div class="navigation">
<div top-menu></div>
</div>
<div ng-view></div>
<footer id="page-footer">
<div class="container">
<span>Copyright © 2014. All Rights Reserved.</span>
<span class="pull-right"><a href="#page-top" class="roll">Go to top</a></span>
</div>
</footer>
</div>
</body>
angular $routeprovider:
angular.module('myApp').config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'main/templates/main.html'
}).when('/ad-element', {
templateUrl: 'submit/templates/submit.html'
}).when('/404', {
templateUrl: 'errors/templates/404.html'
}).otherwise({
redirectTo: '/404'
});
}]);
submit.html
<div class="page-sub-page page-submit">
<div ng-controller="SubmitController" class="container">
<form ...></form>
</div>
</div>
Every angular function is working, the only visible difference is the appearance.
This is the good one:
And this is the bad one:
