AngularJS ngRoute Child View not Loading the Javascript in the Parent View

Question

When trying to custom elements with Angular, I have made different routes, and they work. Problem is some custom elements won't load.

I have a page that is using Angular Route to handle different views like so:

angular.module("appRoutes", ["ngRoute"])

    .config(function($routeProvider, $locationProvider) {

            $routeProvider

                // Route for the home page
                .when("/", {
                    templateUrl  : "../views/home.html",
                    controller   : "homeController",
                    controllerAs : "home"
                })

                // Route for Credits
                .when("/credits", {
                    templateUrl  : "../views/credits.html",
                    controller   : "creditsController",
                    controllerAs : "credits"

                });

            $locationProvider.html5Mode(true);

    });

All the CSS and JS files are called in the index.html file. The CSS at the beginning of the file, the JS at the end of the index.html file. I tried moving the JS imports to the top of the file, however that did not change anything.

The custom elements I'm trying to use are Slider Revolution and Owl Carousel. When I place the content of home.html directly into index.html everything works perfectly.

However, when I try to keep the content of home.html inside of home.html and just load the content using my view. The elements inside the Revolution Slider and Owl Carousel will not work, the images do not load, and the "skeleton" of both of them do not work.

Additionally I tried placing the CSS and JS file imports inside the home.html view and that did not work either.

I have no idea of how to fix it. I imagine it's some kind of issue with the Javascript for Owl Carousel and Revolution Slider not being able to interact with the view inside of home.html since the CSS in general is working with no issues.

Thanks for taking the time to read all of that, any and all help is greatly appreciated.

I cannot, since the JS/CSS for the libraries are copyrighted. — Erick, Feb 02 '15 at 02:22
are you trying to ask how to "lazy load" javascript that is contained in an html template rather than on initial page load? hmm, or are you asking how to make javascript functions that load on page start work when the elements they target aren't in the DOM until later? — Claies, Feb 02 '15 at 02:48
@AndrewCounts I'm not even 100% sure that is the issue, since the console isn't throwing any errors. My hypothesis is that when the Angular content is served (A few milliseconds after the actual page loads for the first time) the Javascript has been called, and as such the content inside the `home.html` file isn't affected by the Javascript and thus rendered useless. I would appreciate any approach that fixes this behavior. — Erick, Feb 02 '15 at 02:54
After some further investigation what seems to be happening is that the `ng-router` nested view is not loading the javascript contained in the parent view after loading the child view. Still no idea of how to solve this, will keep investigating. — Erick, Feb 02 '15 at 04:07

score 2 · Accepted Answer · edited May 23 '17 at 11:53

Having a very similar Issue using angular-ui-router. The CSS is applying fine but the JS is doing nothing. no matter where I load it; wither that be in the index page or my home page. does the ng-view / ui-view act as a namespace? that and DOM loading sequence is the only thing I can think of that would cause this effect. Ill post if I find a solution here

::solution::

So I just got it working. you need to lazy load your 3rd party JS files. check out the answer posted here ( fist one )

Why ng-scope is added to javascript inline of my partial view and makes alert not working?

the only part they do not mention is the script you want to apply to your view needs to be added into the view:

<div ng-view>  
    <script type=text/javascript-lazy src="your/src/path"></script>
</div>

the ngLazyLoad will strip this out of the view and add it to your head at an appropriate time that it can affect the content loaded into your view.

AngularJS ngRoute Child View not Loading the Javascript in the Parent View

1 Answers1