AngularJS ng-click not working with configured Controller

Question

I have this navigation:

                    <ul class="dropdown-menu m-t-xs compact" style="float:right !important;right: 0px;">
                        <li ng-hide="$state.includes('root.projects')"><a ui-sref="portal.user_settings"><span class="icon glyphicon glyphicon-user"></span>User Settings</a></li>
                        <li ng-show="$state.includes('root.projects')"><a ui-sref="root.user_settings"><span class="icon glyphicon glyphicon-user"></span>User Settings</a></li>
                        <li class="divider"></li>
                        <li ng-controller="LoginCtrl"><a href="" ng-click="logout"><span class="icon glyphicon glyphicon-log-out"></span>Logout</a></li>
                    </ul>

But when I click the logout link, nothing happens.

Here is my controller:

'use strict';

function LoginCtrl($scope, Authentication, $window, $cookies, $http, $location) {
    var _self = this;
    _self.loginProcessing = false; //This is a flag for showing the loader animation while the wait for the login response.
    _self.error = null;

    _self.login = function(vm) {  //Defines the login function as a variable on the LoginCtrl
        _self.loginProcessing = true;
        Authentication.Login(vm.email, vm.password).then(function(data){
            _self.loginProcessing = false;

            $window.sessionStorage['currentUser'] = JSON.stringify(data);
            $location.path("/projects");
        }).catch(function(err) {
            _self.error = true;
            _self.loginProcessing = false;
        });
    }

    _self.logout = function() {
        alert("CLICKED");
        // Authentication.logout().then(function() {
        //  $window.sessionStorage['currentUser'] = null;
        //
        //  $location.path("/login");
        // });
    }
}

angular.module('controllers').controller('LoginCtrl', LoginCtrl);

And here is the configured route:

.state('logout',{
    url: "/logout",
    controller: "LoginCtrl",
    templateUrl: 'views/logout.html',
})

I am 100% new to AngularJS, so please excuse my ignorance. Thanks!

you are treating the view variables as if they are part of $scope but controller is not configured for $scope but for controllerAs in view. How are controllers assigned to view? — charlietfl
– charlietfl, Commented Jul 19, 2015 at 2:21
I changed my controller option in the route to be LoginCtrl as LoginCtrl and it's still not working. I'm not sure if that's what you mean — dennismonsewicz
– dennismonsewicz, Commented Jul 19, 2015 at 2:23
that means you need to prefix all the controller variables in view with that alias and a dot — charlietfl
– charlietfl, Commented Jul 19, 2015 at 2:25

Ahmed Eid · Accepted Answer · 2015-07-19 02:29:18Z

1

the view you use is configured for $scope ,, yet your controller uses controller alias ,, so you can use this line to make the button work

<li ng-controller="LoginCtrl as loginCtrl"><a href="" ng-click="loginCtrl.logout()"><span class="icon glyphicon glyphicon-log-out"></span>Logout</a></li>

UPDATE : notice that in ngClick you put the expression not the function so you put logout() not only logout

edited Jul 19, 2015 at 2:29

answered Jul 19, 2015 at 2:25

Ahmed Eid

1,1838 silver badges9 bronze badges

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

3 Comments

dennismonsewicz Over a year ago

Thank you, that worked!! I'm confused, however. What is the difference from doing the controller alias here vs doing it in the route config?

charlietfl Over a year ago

controller already assigned in routing...will run 2 instances this way

Ahmed Eid Over a year ago

I think the routing instance will be intialised only when he navigates to /logout , yet here he intialise the controller in the dropdown menu in the navigation bar not only in /logout !

Collectives™ on Stack Overflow

AngularJS ng-click not working with configured Controller

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related