jQuery Nav's anchor click not working with AngularJS

Question

I have a Home.html screen and its corresponding Angularjs controller(HomeController.js). I am using jQuery Navigation sidebar on home screen. This navigation sidebar has a logout list item (li). I have given ng-click="logout()" to this li (list item), and I have defined logout() in HomeController.js.

When I click on logout, It doesn't give alert, probably it's not going to this controller.

Home.html

<nav id="menu">
<div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12 sidebar-nav-menu">
        <div class="menu_nav">
            <ul>
                <li>
                    <a href="#" ng-click="logout();">
                        <img  src="img/left-pannel/[email protected]" id="nav-icn-home" alt="" class="sidebar-menu-icons">
                        <span class="nav-menu-text">Logout</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div></nav>

HomeController.js

app.controller("HomeController", function ($scope, $location, $window, $compile) {
$scope.logout = function(){
    alert("Click");
    $location.path("/Login");
}});

config.js

var tkitApp = angular.module('tkit', ['ngRoute']);tkitApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {       
    templateUrl: 'views/LaunchScreen.html',
    controller: 'LaunchScreenController'
}).when('/Login', {        
    templateUrl: 'views/Login.html',
    controller: 'LoginScreenController'
}).when('/Home', {        
    templateUrl: 'views/Home.html',
    controller: 'HomeController'
 }).otherwise({ redirectTo: '/' });}]);

I am not even getting alert on click of logout list item.

Logcat when Home.html gets loaded

03-11 17:34:37.530: I/chromium(29156): [INFO:CONSOLE(2)] "HomeController loaded", source: file:///android_asset/www/js/controller/HomeScreenController.js (2)

Any errors in the console? What if you remove the ; in your ng-click= call to logout()? If still has a problem I'd suggest removing a lot of code and keeping it very simple, and getting that to work first. — VictorySaber
– VictorySaber, Commented Mar 11, 2016 at 11:16

sumair · Accepted Answer · 2016-03-11 11:16:11Z

3

Your controller name is different in routing

$routeProvider.when('/', {       
    templateUrl: 'views/LaunchScreen.html',
    controller: 'LaunchScreenController'
}).when('/Login', {        
    templateUrl: 'views/Login.html',
    controller: 'LoginScreenController'
}).when('/Home', {        
    templateUrl: 'views/Home.html',
    controller: 'HomeController'
 }).otherwise({ redirectTo: '/' });}]);

And Controller is

app.controller("HomeController", function ($scope, $location, $window, $compile) {
$scope.logout = function(){
    alert("Click");
    $location.path("/Login");
}});

Please change your controller name like this

app.controller("HomeScreenController", function ($scope, $location, $window, $compile) {
    $scope.logout = function(){
        alert("Click");
        $location.path("/Login");
    }});

It will work

edited Mar 11, 2016 at 11:16

answered Mar 11, 2016 at 11:11

sumair

3863 silver badges8 bronze badges

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

2 Comments

kapishreshth Over a year ago

Thanks for quick response. Please check my updated question. Sorry, In my code, Both places have same controller name, made mistake while copying to notepad (I was trying to change controller name.) and notepad to Stackoverflow. It's not the problem. I did double check.

sumair Over a year ago

Can you please console.log in controller so we can ensure that your controller is load

Collectives™ on Stack Overflow

jQuery Nav's anchor click not working with AngularJS

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related