์ฌ์ด๋ ๋ฉ๋ด ํ ํ๋ฆฟ์๋ app.js์ ์ ์๋ ์ฌ๋ฌ ์ค์ฒฉ ์ํ๊ฐ ์์ต๋๋ค. ์ค์ฒฉ ์ํ(์: 'app.single')๋ก ์ด๋ํ๋ฉด ion-nav-bar๊ฐ '< ๋ค๋ก' ๋ฒํผ์ผ๋ก ์ ๋ฐ์ดํธ๋ฉ๋๋ค.
'ํ ํ์ด์ง'('/app/playlists')๋ก ๋์๊ฐ๋ฉด ๋ค๋ก ๋ฒํผ์ด ion-navicon์ผ๋ก ๋ฐ๋๋๋ค(menu.html ์ฐธ์กฐ). ์ปจํธ๋กค๋ฌ์ ๊ฐ๋จํ ๊ธฐ๋ฅ์ ์ถ๊ฐํ์ฌ ํ ํ์ด์ง(playlists.html)๋ก ์ ํํ ์๋ ์์ต๋๋ค.
$scope.goHome = function() {
$state.go('app.playlists');
};
๋ค๋ฅธ ์์ค์ ์ค์ฒฉ ์ํ๋ฅผ ์ถ๊ฐํ๋ ๊ฒฝ์ฐ:
.state('app.playlists.classic-rock', {
url: "/classic-rock",
views: {
'menuContent<strong i="10">@app</strong>': {
templateUrl: "templates/classic-rock.html",
controller: 'ClassicRockController'
}
}
})
๊ทธ๋ฆฌ๊ณ ํ ํ์ด์ง๋ก ์ ํํ๋ ๋ณด๊ธฐ ์ปจํธ๋กค๋ฌ์์ goHome() ํจ์๋ฅผ ํธ์ถํ์ง๋ง ๋ค๋ก ๋ฒํผ์ ion-navicon์ผ๋ก ๋์ฒด ๋์ง ์์ต๋๊น?
ํ ๋ณด๊ธฐ์์ ๋ค๋ฅธ ๋ณด๊ธฐ๋ก ์ด๋ํ ๋ค์ 'ํ ํ์ด์ง'๋ก ๋ค์ ์ด๋ํ๋ ๊ฒฝ์ฐ์๋ ๋ง์ฐฌ๊ฐ์ง์ ๋๋ค.
์ฌ์ด๋ ๋ฉ๋ด ํ ํ๋ฆฟ์ menu.html์์:
<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>
์ด์จ - ํ์ - ๋ฒํผ์ ์ด์จ ํญ๋ฒ ๋ณผ ์ ์์ต๋๋ค ์ด์จ ํ์ ๋ฐ์ ์ง๊ณ ํ์์ด์ด์ผํฉ๋๋ค.
์ ๋ฐ์ดํธ๋ menu.html:
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
๋ฐ ์ ๋ฐ์ดํธ๋ ์ฌ์ ๋ชฉ๋ก.html:
<ion-view view-title="Playlists">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon"
menu-toggle="left">
</button>
</ion-nav-buttons>
<ion-content>
<ion-list>
<ion-item ng-repeat="playlist in playlists"
href="#/app/playlists/{{playlist.id}}">
{{playlist.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
๋ฐ๋ผ์ ์ค๋ช ํ๋ ๋ด์ฉ๊ณผ ๋งํฌ์ ์ด ์ค์ ๋ก ์ ํํฉ๋๋ค.
http://codepen.io/mhartington/pen/azwojR
์ค๋ช ํ๋ ๊ฒ์ menu-close ์์ฑ์ผ๋ก ์ธํด ๋ฐ์ํฉ๋๋ค.
http://ionicframework.com/docs/api/directive/menu๋ซ๊ธฐ/
๋ฐ๋ผ์ ์ฌ์ด๋ ๋ฉ๋ด๋ฅผ ํตํด ํ์ํ ๋ ๋ฉ๋ด ๋ซ๊ธฐ ์์ฑ์ด ์๋ ๋งํฌ๋ ๊ธฐ๋ก์ ์ง์ฐ๊ณ ๋ค๋ก ๋ฒํผ์ด ํ์๋์ง ์๋๋ก ํฉ๋๋ค.
๊ทํ์ ๊ฒฝ์ฐ $state.go
๋ฅผ ํตํด ํ์ ์ค์ด๋ฉฐ menu-close ๊ฐ ์ ๊ณตํ๋ ๋
ผ๋ฆฌ๊ฐ ์์ต๋๋ค.
๊ทธ๋์ ๋น์ ์ ๊ทธ๊ฒ์ ์ฝ๊ฐ์ ์ถ๊ฐํด์ผํฉ๋๋ค.
$scope.goHome = function() {
$state.go('app.playlists');
$ionicHistory.nextViewOptions({
historyRoot: true
});
};
@mhartington ๊ฐ์ฌํฉ๋๋ค....
๊ทธ๊ฒ์ ๋ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ์ต๋๋ค ...
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๋ฐ๋ผ์ ์ค๋ช ํ๋ ๋ด์ฉ๊ณผ ๋งํฌ์ ์ด ์ค์ ๋ก ์ ํํฉ๋๋ค.
http://codepen.io/mhartington/pen/azwojR
์ค๋ช ํ๋ ๊ฒ์ menu-close ์์ฑ์ผ๋ก ์ธํด ๋ฐ์ํฉ๋๋ค.
http://ionicframework.com/docs/api/directive/menu๋ซ๊ธฐ/
๋ฐ๋ผ์ ์ฌ์ด๋ ๋ฉ๋ด๋ฅผ ํตํด ํ์ํ ๋ ๋ฉ๋ด ๋ซ๊ธฐ ์์ฑ์ด ์๋ ๋งํฌ๋ ๊ธฐ๋ก์ ์ง์ฐ๊ณ ๋ค๋ก ๋ฒํผ์ด ํ์๋์ง ์๋๋ก ํฉ๋๋ค.
๊ทํ์ ๊ฒฝ์ฐ
$state.go
๋ฅผ ํตํด ํ์ ์ค์ด๋ฉฐ menu-close ๊ฐ ์ ๊ณตํ๋ ๋ ผ๋ฆฌ๊ฐ ์์ต๋๋ค.๊ทธ๋์ ๋น์ ์ ๊ทธ๊ฒ์ ์ฝ๊ฐ์ ์ถ๊ฐํด์ผํฉ๋๋ค.