AngularJS - On click not reaching controller method

Question

I am learning Angularjs and Nodejs by developing a project. I have followed this tutorial and organised my folder structure and route configurations.

Problem: I have added a method called isActive to update ng-class based on tab click. But when I click the tab it is not calling the isActive method.

My guess is, I have done something wrong in appRoutes.js but not sure how to fix this. I am able to reach the MainController but not the methods in it.

I have another question, I need to make the Home tab active when I enter the application or when I clicked on home tab or when I click on application header too.

Below is the html and the js codes.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <base href="/">
        <title>ets</title>
        <link rel="stylesheet" type="text/css" href="libs/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/ets.css">
    </head>

    <body ng-app="etsApp">
        <div id="mainDiv">
            <div>
                <section id="header_section" class="main-title"></section>
                <section id="nav_section"></section>
            </div>
            <section id="body_section">
                <div ng-view="ng-view"></div>
            </section>
            <section id="footer_section" class="footer-style"></section>
        </div>

        <script type="text/javascript" src="libs/jquery/dist/jquery.min.js"></script>       
        <script type="text/javascript" src="libs/angular/angular.min.js"></script>
        <script type="text/javascript" src="libs/angular-route/angular-route.min.js"></script>
        <script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
        <script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
        <script type="text/javascript" src="js/appRoutes.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#header_section').load('views/partials/header.html');
                $('#nav_section').load('views/partials/navigation_main.html');
                $('#footer_section').load('views/partials/footer.html');    
            });
        </script>
    </body>
</html>

navigation_main.html

<div>
  <nav class="navbar navbar-inverse">
    <ul class="nav navbar-nav">

      <li ng-class="{active : isActive('/home')}" id="nav_home">
        <a href="/home">Home</a>
      </li>

      <li ng-class="{active : isActive('/expensereporting')}" id="nav_exprep">
        <a href="/expensereporting">Expense Reporting</a>
      </li>

      <li ng-class="{active : isActive('/remainders')}">
        <a href="/remainders" id="nav_remain">Todo Remainder's</a>
      </li>

      <li ng-class="{active : isActive('/pdfoperations')}">
        <a href="/pdfoperations" id="nav_pdf">PDF Operation's</a>
      </li>

      <li ng-class="{active : isActive('/imageoperations')}">
        <a href="/imageoperations" id="nav_img">Image Operation's</a>
      </li>

    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#" style="margin-right: 20px; color: white;">Login/Register</a></li>
    </ul>
  </nav>
</div>

header.html

<div>
  <header id="header" style="margin-left: 50px;">
      <a href="/" style="text-decoration: none; color: black;">
        <strong>eTools Store</strong>
      </a> 
  </header>
</div>

appRoutes.js

angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider

        .when('/', {
            templateUrl: 'views/partials/home.html',
            controller: 'MainController'
        })

        .when('/home', {
            templateUrl: 'views/partials/home.html',
            controller: 'MainController'    
        });

        $locationProvider.html5Mode(true);
}]);

app.js

    angular.module('etsApp', ['ngRoute', 'appRoutes', 'HomeCtrl', 'MainCtrl']);

MainCtrl.js

angular.module('MainCtrl', []).controller('MainController', function($scope) {
        console.log('Main Controller');

        $scope.isActive = function(destination) {
            console.log($location.path());
            return destination === $location.path();
        }

    });

Could just be a syntax error? - you need quotes around the class name. `
@Tristan I don't think so .. pls see this answer http://stackoverflow.com/a/18562339/967638 — Amarnath, Nov 06 '15 at 07:26
this doesn't look right to me. aside from the bad practice of using the same controller for more than one route, you are also trying to evaluate angular expressions in an element which would not have access to the controller. The angular route provider attaches the controller to the `ng-view` element and the templates loaded within only, it does not make the controller available 'globally'. — Claies, Nov 06 '15 at 08:01
also, the practice of using JQuery `.load()` to inject your partials is very much not the angular way. — Claies, Nov 06 '15 at 08:03
the article you linked specifically says that for this code you copied to work, it would need to be in a controller *outside* `ng-view`. — Claies, Nov 06 '15 at 08:07
@Claies Got it. But I want to make the header footer in a separate file. How can I insert them. Can we insert more than one page in the templateUrl? If yes then an example will be helpful. — Amarnath, Nov 06 '15 at 11:21
to your question regarding inserting more than one template, there are multiple ways to accomplish this, it would be much better if that were presented as a new question. some possibilities, however, could be: using `ng-include`, using directives, using a router which supports view composites, like ui-router. — Claies, Nov 06 '15 at 19:57

score 1 · Answer 1 · answered Nov 06 '15 at 07:18

About problem not reaching isActive method:
Try to reorganize:

    <script type="text/javascript" src="js/controllers/MainCtrl.js">         </script>
    <script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
    <script type="text/javascript" src="js/appRoutes.js"></script>
    <script type="text/javascript" src="js/app.js"></script>

into:

    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/appRoutes.js"></script>
    <script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
    <script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>

Nope. Still not reaching .. :( – Amarnath Nov 06 '15 at 07:29 — Amarnath, Nov 06 '15 at 07:29

NeiL · Answer 2 · 2015-11-06T07:48:39.297

May be you forget to add .otherwise

        .when('/', {
            templateUrl: 'views/partials/home.html',
            controller: 'MainController'
        })

        .when('/home', {
            templateUrl: 'views/partials/home.html',
            controller: 'MainController'    
        })
        .otherwise({
                redirectTo: '/'
            });

Update : Try this - In navigation_main.html

 <li ng-class="{'active' : path}" >
    <a href="/imageoperations" id="nav_img" ng-click="itemClicked('/imageoperations')">Image Operation's</a>
  </li>

MainCtrl.js

angular.module('MainCtrl', []).controller('MainController', function($scope) {
        console.log('Main Controller');

        $scope.itemClicked= function(destination) {
                      $scope.path = destination;
        }

    });

I don't think so. Otherwise acts like else part of an if-else condition just to goto the last condition if nothing else is satisfied. Anyways I have tried but nope still not reaching. — Amarnath, Nov 06 '15 at 07:38

score 1 · Accepted Answer · answered Nov 06 '15 at 08:07

1

Your navigation_main.html is outside of controller scope. That's the main reason. Try to create separate controller for you navigation like this

.controller('NavCtrl', function($scope) {
    isActive = function(destination) { /*...*/ }
}

Put it into file js/nav.js and add to your html

<script type="text/javascript" src="js/nav.js"></script>

And then add this controller to your navigation_main.html code

<div ng-controller="NavCtrl">

answered Nov 06 '15 at 08:07

Rashad Ibrahimov

3,279
2
18
39

Even I have the same doubt. Good one. But I have a question how to make the nav bar to come under the MainController scope? – Amarnath Nov 06 '15 at 09:23
Dont' know why you need it. Ok in this case just add MainController to navigation_main.html `
`
– Rashad Ibrahimov Nov 06 '15 at 09:36
Do we need to mention the controller in the div also? Because as per the tutorial link, in appRoutes.js we write templateUrl as well as controller. The controller here means when we access a link say '/' (ROOT) then we will use the controller that is mentioned there. Am I right? I tried adding this to Navigation div but it does not work. Anyways le me write JSFiddle such that it will be easy for soem one to understand the problem – Amarnath Nov 06 '15 at 09:47
You indicate controller and templateUrl in route params, i.e. you bind controller to this template. You don't need to mention controller in template view. And when routing, template view is load into `
`. You can use controller variables and methods only in this view, not other! For example, when `/` routing, `home.html` is load to `
`, and you can use MainController functions only in this view `home.html`, you CANNOT use MainController functions in other place of html code which is out of scope. – Rashad Ibrahimov Nov 06 '15 at 10:11
That's a great point. I thought the controller that is mentioend will take care of the **whole** page present in that link. Oh thanks for the point. – Amarnath Nov 06 '15 at 10:24
Thanks man. It worked. Scope is the issue. Now I defined another controller for Navigation. Can you put your comment as answer I will update and mark it? – Amarnath Nov 06 '15 at 11:19

score 0 · Answer 4 · answered Nov 06 '15 at 07:20

You can try angular ui-router for your routing and for adding an active class when a state is active. You only need to add ui-sref-active="YourActiveClassHere". Angular UI-Router

Try to change the order of this,

    <script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
    <script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
    <script type="text/javascript" src="js/appRoutes.js"></script>
    <script type="text/javascript" src="js/app.js"></script>

To this,

    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/appRoutes.js"></script>
    <script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
    <script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>

score 0 · Answer 5 · answered Nov 06 '15 at 07:58

Try to add ng-click=isActive('/home'), in your a tag.

<li ng-class="{active : activeClass == 'home'}" id="nav_home">
    <a href="/home" ng-click=isActive('/home')>Home</a>
</li>

In your MainCtrl add this line,

$scope.activeClass = '';
$scope.isActive = function(destination) {
    $scope.activeClass = destination;
}

AngularJS - On click not reaching controller method

5 Answers5