Routing with angular js, other javascript doesn't work for routed tabs

Question

I am working on a single page app with angularjs. The routing works fine and all and my javascript that's targeted towards elements not in the ng-view works like a charm. However, the javascript that is meant for elements inside the ng-view doesn't work at all.

So for example when I click on my navigation menu the javascript works great and the menu background changes color, however if I navigate to one.html and click on the link, no javascript triggers at all.

index.html

<!DOCTYPE html>
<html>
<head>
    <!-- Load Angular Js -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-route.min.js"></script>
    <script src="route.js"></script>
</head>
<body ng-app="single-page-app">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div ng-controller="cfgController">
                    <nav class="navbar navbar-default">
                        <div class="container-fluid">
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                                        <span class="sr-only">Toggle navigation</span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                    </button>
                                    <a class="navbar-brand" href="#">Navigation</a>
                            </div>
                            <div id="navbar" class="navbar-collapse collapse">
                                    <ul class="nav navbar-nav">
                                        <li><a href="#/1">One</a></li>
                                        <li><a href="#/2">Two</a></li>
                                        <li><a href="#/3">Three</a></li>
                                        <li><a href="#/4">Four</a></li>
                                    </ul>
                            </div>
                        </div>
                    </nav>
            </div>
        </div>
    </div>
    <div ng-view>

    </div>
</div>

<!-- JavaScript placed at bottom for faster page loading times -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
    $('.navbar-nav>li>a').click(function() {
        $('.navbar-nav>li').css('background', '#fcfcfc');
        $(this).parent().css('background', '#337ab7');
    });

    $('.test').click(function() {
        alert('Working!');
    })
</script>

route.js

var app=angular.module('single-page-app',['ngRoute']);
app.config(function($routeProvider){
    $routeProvider
        .when('/1',{
            templateUrl: 'one.html'
        })
        .when('/2',{
            templateUrl: 'two.html'
        })
        .when('/3',{
            templateUrl: 'three.html'
        })
        .when('/4',{
          templateUrl: 'four.html'
        })
});
app.controller('cfgController',function($scope){

});

one.html

<div class="row">
    <div class="col-md-12">
        <a href="#" class="test">Test Js</a>
    </div>
</div>

Could you expand on that? I'm just learning angularjs and I'm trying to follow tutorials but I'm getting a bit lost. — Mr.Smithyyy
– Mr.Smithyyy, Commented Aug 6, 2015 at 13:35
i don't understand what code isn't working ? is there some other controller suppose to be associated with the template ? — eran otzap
– eran otzap, Commented Aug 6, 2015 at 13:36
His ng.view is outside of any controller, he must defined controllers for views in his route configuration — Tomislav
– Tomislav, Commented Aug 6, 2015 at 13:38
I suggest to use ui-router which is better than basic rooting. — Ronan Quillevere
– Ronan Quillevere, Commented Aug 6, 2015 at 13:39

Tomislav · Accepted Answer · 2015-08-06 13:43:07Z

4

Your ng-view is outside of any controller.

You have to define controllers for your routes (partial views) like this:

var app=angular.module('single-page-app',['ngRoute']);
app.config(function($routeProvider){
    $routeProvider
        .when('/1',{
            templateUrl: 'one.html',
            controller: 'oneCtrl'
        })
        .when('/2',{
            templateUrl: 'two.html',
           controller: 'twoCtrl'
        })

        .when('/3',{
            templateUrl: 'three.html',
            controller: 'threeCtrl'
        })
        .when('/4',{
          templateUrl: 'four.html',
          controller: 'fourCtrl'
        })
});
app.controller('cfgController',function($scope){

});
app.controller('oneCtrl',function($scope){

});
app.controller('twoCtrl',function($scope){

});
app.controller('threeCtrl',function($scope){

});

After that you can do your javascript for some view in corresponding controller. Your routing logic will assure that every partial view that you inject in your ng-view is using controller defined for that view (or template).

edited Aug 6, 2015 at 13:43

answered Aug 6, 2015 at 13:37

Tomislav

3,21120 silver badges22 bronze badges

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

1 Comment

Mr.Smithyyy Over a year ago

You are a saint. Thank you for saving my hair from being pulled out.

Alexander Ponomarev · Accepted Answer · 2015-08-06 13:37:09Z

0

You can use

$('body').on('click', '.navbar-nav>li>a', function() {
    $('.navbar-nav>li').css('background', '#fcfcfc');
    $(this).parent().css('background', '#337ab7');    
)};

But it's a bad way to make angular app. Normally you wouldn't create event handlers outside angular app scope. You should use ng-click at least. And the better way is creating a directive.

answered Aug 6, 2015 at 13:37

Alexander Ponomarev

1058 bronze badges

Collectives™ on Stack Overflow

Routing with angular js, other javascript doesn't work for routed tabs

index.html

route.js

one.html

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

index.html

route.js

one.html

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related