ng-click не работает на ионном элементе внутри ионного бокового меню

Question

У меня есть панель слайда. Все работает отлично для меня, кроме Logout. Посмотрите на боковую панель.

<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> 

А ниже мой код контроллера

(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(); 
     } 
    } 

})(); 

Когда я нажимаю на Logout, боковая панель свернута, и ничего не происходит контроллера.

Answer 1

Глядя на код, это не возможно прямо сейчас, чтобы использовать ng-click на ion-item, потому что Ионные в основном создает новый якорь <a> тег и только сохраняя href & target атрибуты в нем.

Таким образом, ваш ng-click будет игнорироваться. Посмотрите на код здесь: https://github.com/driftyco/ionic/blob/v1.2.4/js/angular/directive/item.js#L44

Вы в основном должны создать свой собственный другую директиву для обработки нажмите так:

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

И затем использовать его в представлении:

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