Ng-click does not work on ionic element inside ionic sidebar

Question

I have a slide / exit panel. Everything works fine for me except Logout . Look at the sidebar.

  <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 Logout , the sidebar closes and nothing happens on the controller.

Answer 1

If you look at the code, now you cannot use ng-click in ion-item , because Ionic basically creates a new <a> binding and saves only the href and target attributes to it.

This way your ng-click ignored. Take a look at the code here: https://github.com/driftyco/ionic/blob/v1.2.4/js/angular/directive/item.js#L44

Basically you should create your own other directive to handle the click as follows:

 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>