Π ΡΠ°Π±Π»ΠΎΠ½Π΅ Π±ΠΎΠΊΠΎΠ²ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ Π² 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>
ion-nav-buttons Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΏΡΡΠΌΡΠΌ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠΌ ion-nav-view ΠΠ ion-nav-bar.
ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΎ menu.html:
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΠ» playlists.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
Π’ΠΎ, ΡΡΠΎ Π²Ρ ΠΎΠΏΠΈΡΡΠ²Π°Π΅ΡΠ΅, Π²ΡΠ·Π²Π°Π½ΠΎ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ Π·Π°ΠΊΡΡΡΠΈΡ ΠΌΠ΅Π½Ρ.
http://ionicframework.com/docs/api/directive/menuClose/
ΠΠΎΡΡΠΎΠΌΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΠ΅ΡΡ ΡΠ΅ΡΠ΅Π· Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΡΡΡΠ»ΠΊΠΈ Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ Π·Π°ΠΊΡΡΡΠΈΡ ΠΌΠ΅Π½Ρ ΠΎΡΠΈΡΠ°ΡΡ ΠΈΡΡΠΎΡΠΈΡ ΠΈ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ°ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°.
Π Π²Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ Π²Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΠ΅ΡΡ ΡΠ΅ΡΠ΅Π· $state.go
, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π½Π΅Ρ Π»ΠΎΠ³ΠΈΠΊΠΈ, ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅ΠΌΠΎΠΉ Π·Π°ΠΊΡΡΡΠΈΠ΅ΠΌ ΠΌΠ΅Π½Ρ.
Π’Π°ΠΊ ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊ Π½Π΅ΠΌΡ.
$scope.goHome = function() {
$state.go('app.playlists');
$ionicHistory.nextViewOptions({
historyRoot: true
});
};
ΡΠΏΠ°ΡΠΈΠ±ΠΎ @mhartington ....
ΡΡΠΎ ΡΠ΅ΡΠΈΠ»ΠΎ ΠΌΠΎΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ...
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
ΠΡΠ°ΠΊ, ΡΠΎ, ΡΡΠΎ Π²Ρ ΠΎΠΏΠΈΡΡΠ²Π°Π΅ΡΠ΅, ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ° Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π²Π΅ΡΠ½Ρ.
http://codepen.io/mhartington/pen/azwojR
Π’ΠΎ, ΡΡΠΎ Π²Ρ ΠΎΠΏΠΈΡΡΠ²Π°Π΅ΡΠ΅, Π²ΡΠ·Π²Π°Π½ΠΎ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ Π·Π°ΠΊΡΡΡΠΈΡ ΠΌΠ΅Π½Ρ.
http://ionicframework.com/docs/api/directive/menuClose/
ΠΠΎΡΡΠΎΠΌΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΠ΅ΡΡ ΡΠ΅ΡΠ΅Π· Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΡΡΡΠ»ΠΊΠΈ Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ Π·Π°ΠΊΡΡΡΠΈΡ ΠΌΠ΅Π½Ρ ΠΎΡΠΈΡΠ°ΡΡ ΠΈΡΡΠΎΡΠΈΡ ΠΈ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ°ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°.
Π Π²Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ Π²Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΠ΅ΡΡ ΡΠ΅ΡΠ΅Π·
$state.go
, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π½Π΅Ρ Π»ΠΎΠ³ΠΈΠΊΠΈ, ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅ΠΌΠΎΠΉ Π·Π°ΠΊΡΡΡΠΈΠ΅ΠΌ ΠΌΠ΅Π½Ρ.Π’Π°ΠΊ ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊ Π½Π΅ΠΌΡ.