[Ionic] side menu toggle

side menu를 구성하다보면 딜레마에 헷갈릴때가있다.

1. menu-toggle

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

2. ng-click , 함수로 굳이 toggle표기해주기

<ion-nav-buttons side="left">
  <button class="button button-icon button-clear ion-navicon" 
	ng-click="toggleLeft()">
  </button>
</ion-nav-buttons>
<ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i></ion-nav-back-button>

-> toggleLeft의 내용은 

$scope.toggleLeft = function() {
  $ionicSideMenuDelegate.toggleLeft();
};

원래 리스트에서 암거나 한 항목 클릭해서 디테일을 들어가면, 사이드메뉴버튼이 백버튼으로 바뀔때가있다.

1번으로 하면, 백버튼과 사이드메뉴버튼이 토글된다.

보통 상태

여기서 디테일이나 더 깊이 들어가면 

 이렇게 백버튼으로 변경된다.

2번으로하면. 보통상태는 똑같은데, 더 깊이 들어가면

이렇게 백버튼과 메뉴버튼이 공존한다.  메뉴버튼을 항상 떠있게 하고싶으면 2번처럼 function을 줘서 사용하도록 하는게 좋다.

여기서 1번의 백버튼 아이콘과 2번의 백버튼 아이콘이 왜 다르냐면, 2번소스에는 아이콘을 별도로 지정해줬기때문이다.