CODEWITHSUNDEEP
javascriptangularjsangular-routing
Erick
Erick

Reputation: 2608

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

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.

Upvotes: 3

Views: 1938

Answers (1)

Eolis
Eolis

Reputation: 655

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.

Upvotes: 2

Related Questions