2016-01-04 23 views
5

Ich habe ein Slide In/Out Panel. Alles funktioniert gut für mich außer der Logout. Bitte sehen Sie sich die Seitenansicht an.ng-click arbeitet nicht an ion-item im ionen-side-menü

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

Und unten ist mein 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(); 
     } 
    } 

})(); 

Wenn ich auf Logout klicken, Seitenwand geschlossen erhalten und nichts geschieht am Regler.

+0

Was ist passiert in der 'menu-close'-Direktive? –

+0

Es verschiebt und schließt die seitliche Menüliste –

+0

können Sie ein PLNKR und Codepen machen? – macrog

Antwort

4

auf dem Code sucht, ist es jetzt nicht möglich ng-click auf den ion-item zu verwenden, da das Ionic ist im Grunde einen neuen Anker <a>-Tag erstellen und nur die href & target Attribute darin zu halten.

Also im Grunde wird Ihre ng-click wird ignoriert. Schauen Sie sich den Code hier: https://github.com/driftyco/ionic/blob/v1.2.4/js/angular/directive/item.js#L44

Sie müssen im Grunde Ihre eigene andere Richtlinie erstellen, um den Click wie folgt zu behandeln:

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

Und es dann in der Ansicht verwenden:

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

Ja, du hattest Recht. Das Erstellen meiner eigenen Richtlinie löste den Zweck hier. Danke @Shashank –