ng-click not working on ion-item inside ion-side-menu

Question

I have a slide in/out panel. Everything is working fine for me except the Logout. Please have a look at the side panel view.

    <ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
    <!-- -->
      <ion-nav-back-button>
      </ion-nav-back-button>
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    <!-- -->
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Angular Social</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close href="#/app/dashboard">
            <i class="icon ion-home"></i>
          Dashboard
        </ion-item>
        <ion-item menu-close href="#/app/friends">
            <i class="icon ion-person-stalker"></i>
          Friends
        </ion-item>
        <ion-item menu-close href="#/app/settings">
            <i class="icon ion-gear-a"></i>
          Settings
        </ion-item>
        <ion-item menu-close href="#/app/search">
            <i class="icon ion-search"></i>
          Search
        </ion-item>
        <ion-item menu-close ng-click="ac.logout()">
            <i class="icon ion-log-out"></i>
          Logout
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

And below is my controller code

(function () {
    'use strict';

    angular.module('starter').controller('DashboardController', DashboardController);
    DashboardController.$inject = ['UserService', '$scope', '$state', 'CommonService' ,'$ionicLoading'];

    function DashboardController(UserService, $scope, $state, CommonService, $ionicLoading)
    {
        var ac = this;
        ac.logout   = logout;

        initController();

        function logout()
        {
            console.log('reachedhere');
            CommonService.logout()
        }

        function initController()
        {
            var loggedInStatus = localStorage.getItem('userLoggedIn');
            if (loggedInStatus === 'false') {
                $state.go('signin');
            }
            loadCurrentUser();
            loadnotifications();
        }

        function loadCurrentUser()
        {
            var name = { 'username' : localStorage.getItem('username') };
            UserService.GetByUsername(name).then(function (response) {
                $scope.userData = response;
            });
        }

        function loadnotifications()
        {
            $ionicLoading.show({
                template: 'loading'
            });
            var name = { 'username' : localStorage.getItem('username') };
            UserService.GetByUsername(name).then(function (data) {
                var id = data.id;
                console.log(data.id);
                UserService.GetFriedRequests(id).then(function (response) {
                    $scope.requests = response;
                });
            });
            $ionicLoading.hide();
        }
    }

})();

When I click on Logout, side panel get closed and nothing happens at controller.

Answer 1

Looking at the code, it is not possible right now to use ng-click on the ion-item because the Ionic is basically creating a new anchor <a> tag and only keeping the href & target attributes in it.

So basically, your ng-click is getting ignored. Look at the code here: https://github.com/driftyco/ionic/blob/v1.2.4/js/angular/directive/item.js#L44

You basically have to create your own another directive to handle the click like this:

angular.module('starter').directive('logOut', function() {
    return {
        link: function($scope, element) {
            element.on('click', function() {
                ac.logout()
            });
        }
    }
});

And then use it in the view:

<ion-item menu-close log-out>
      <i class="icon ion-log-out"></i>
      Logout
</ion-item>