Ionic-framework: ์‚ฌ์ด๋“œ ๋ฉ”๋‰ด ํ…œํ”Œ๋ฆฟ, ion-nav-back-button, ion-navicon ๋ฐ $state.go('/app/playlists');

์— ๋งŒ๋“  2015๋…„ 01์›” 04์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: ionic-team/ionic-framework

์‚ฌ์ด๋“œ ๋ฉ”๋‰ด ํ…œํ”Œ๋ฆฟ์—๋Š” 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์œผ๋กœ ๋Œ€์ฒด ๋˜์ง€ ์•Š์Šต๋‹ˆ๊นŒ?

ํ•œ ๋ณด๊ธฐ์—์„œ ๋‹ค๋ฅธ ๋ณด๊ธฐ๋กœ ์ด๋™ํ•œ ๋‹ค์Œ 'ํ™ˆ ํŽ˜์ด์ง€'๋กœ ๋‹ค์‹œ ์ด๋™ํ•˜๋Š” ๊ฒฝ์šฐ์—๋„ ๋งˆ์ฐฌ๊ฐ€์ง€์ž…๋‹ˆ๋‹ค.

  • http://localhost :8100/#/app/playlists (ion-nav-bar์—๋Š” ion-navicon์ด ์žˆ์Šต๋‹ˆ๋‹ค)
  • http://localhost :8100/#/app/playlists/1 (ion-nav-bar์—๋Š” '< ๋’ค๋กœ' ๋ฒ„ํŠผ์ด ์žˆ์Œ)
  • http://localhost :8100/#/app/playlists/2 (ion-nav-bar์—๋Š” '< ๋’ค๋กœ' ๋ฒ„ํŠผ์ด ์žˆ์Œ)
  • http://localhost :8100/#/app/playlists (ion-nav-bar์—๋Š” '< ๋’ค๋กœ' ๋ฒ„ํŠผ์ด ์žˆ์ง€๋งŒ ion-navicon์€ ์žˆ์–ด์•ผ ํ•จ)

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋”ฐ๋ผ์„œ ์„ค๋ช…ํ•˜๋Š” ๋‚ด์šฉ๊ณผ ๋งˆํฌ์—…์ด ์‹ค์ œ๋กœ ์ •ํ™•ํ•ฉ๋‹ˆ๋‹ค.

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

๋ชจ๋“  3 ๋Œ“๊ธ€

์‚ฌ์ด๋“œ ๋ฉ”๋‰ด ํ…œํ”Œ๋ฆฟ์˜ 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 ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค....
๊ทธ๊ฒƒ์€ ๋‚ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ–ˆ์Šต๋‹ˆ๋‹ค ...

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰