2016-01-04 8 views
5

私はスライドイン/アウトパネルを持っています。 Logoutを除いてすべてがうまくいきます。サイドパネルを見てください。ion-side-menuのイオンアイテムでng-clickが機能しない

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

以下Logoutに私をクリックすると、私のコントローラのコード

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

})(); 

、サイドパネルは閉じますと、何もコントローラで行われていません。イオンは、基本的に新しいアンカー<a>タグを作成し、それだけでhref & target属性を保っているため、コードを見てみると

+0

は何ですか'menu-close'ディレクティブで起こっていることは? –

+0

サイドメニューリストをスライドさせて閉じる –

+0

plnkrとcodepenを作成できますか? – macrog

答えて

4

、それはion-itemng-clickを使用することが今はできません。

基本的に、あなたのng-clickは無視されています。ここでのコードを見てください:

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

そしてビューでそれを使用します:https://github.com/driftyco/ionic/blob/v1.2.4/js/angular/directive/item.js#L44

あなたは基本的にこのようなクリックを処理するために、独自の別のディレクティブを作成する必要が

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

あなたは正しいです。私自身の指令を作成することで、ここでの目的が解決されました。ありがとう@Shashank –