angular-ui-router javascript view

Question

I'm doing a website with angularJS and ui-router.

My problem is that a have a custom Javascript file for my dropdown menu and other resources in my page. All works fine when i write the html directly in my index page or use PHP include to include the code in the page. But when using ui-route my Javascript code don't work with the objects inside the view and I can't figure out why.

I tried lazy loading and it failed.

heres my html code:

<body ng-app="MuRings">
<div ui-view="menu"></div>

my router code:

var app = angular.module("MuRings", ["ui.router"])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('home', {
        url: "/",
        views: {
            "topContacts": { templateUrl: "views/topContacts.html"},
            "menu": { templateUrl: "views/navbar.html"},
            "headerTitle": { templateUrl: "views/headerTitle.html"}
        }
    });

$urlRouterProvider.otherwise("/");
});

im loading this navbar into the ui-view:

<nav class="nk-navbar nk-navbar-top nk-navbar-sticky nk-navbar-autohide">
        <div class="container">
            <div class="nk-nav-table">
                <a href="index.html" class="nk-nav-logo">
                    <img src="assets/images/logo.png" alt="" width="90">
                </a>
                <ul class="nk-nav nk-nav-right hidden-md-down" data-nav-mobile="#nk-nav-mobile">
                    <li class="active">
                        <a href="index.html">Home</a>
                    </li>
                    <li class=" ">
                        <a href="#">Sobre o Jogo</a>
                    </li>
                    <li class=" nk-mega-item nk-drop-item">
                        <a href="#">Guias</a>
                        <div class="dropdown">
                            <div class="bg-image" style="background-image: url('assets/images/bg-menu.jpg')"></div>
                            <ul>
                                <li>
                                    <ul>
                                        <li class="  ">
                                            <a href="element-carousels.html">                Carousels</a>
                                        </li>
                                        <li class="  ">
                                            <a href="element-image-boxes.html">                Image Boxes</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="  nk-drop-item">
                        <a href="#"> Media </a>
                        <ul class="dropdown">
                            <li class="  ">
                                <a href="./pages/gallery-3-col.html"> Fotos </a>
                            </li>
                            <li class="  ">
                                <a href="./pages/videos-2-col.html"> Videos </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

and trying to do things like this form a JS file

// add link effect for navbar
$('.nk-navbar ul > li > a:not(.btn):not(.nk-btn):not(.no-link-effect)').addClass('link-effect-4');

"But when using ui-route my Javascript can't work with the objects inside the view and I can't figure out why." -Can you be more specific? and include an example. — Justin_H
– Justin_H, Commented Oct 30, 2016 at 6:55
I added some more code to show. Not a single line from my js files work with html loaded into the ui-view. I saw some people with this problem too, but no answer — Marcus Fleck
– Marcus Fleck, Commented Oct 30, 2016 at 7:11
Your mixing angular and jquery; this leads to alcoholism. If you have time it's best to just learn to do things the angular way. More immediately I suspect your code is not working because your javascript file with the jquery is running before angular has loaded that navbar html into the dom. — Justin_H
– Justin_H, Commented Oct 30, 2016 at 7:24
That's probably the issue, I'll try to rewrite everything and post the result here — Marcus Fleck
– Marcus Fleck, Commented Oct 30, 2016 at 7:35

Marcus Fleck · Accepted Answer · 2016-10-31 18:51:35Z

0

I've been able to solve this problem by putting all scripts imports into a html file and loading it into a ui-view.

This is a massive workaround, and is not the best solution. I'm doing it like that because my Jquery script has over 6000 lines and I'll take a lots of time to rewrite it.

answered Oct 31, 2016 at 18:51

Marcus Fleck

12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular-ui-router javascript view

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related