8
Ionic에 익숙하지 않지만 사용해보고 싶었던 지 오래되었습니다. 나는 주위를 놀고있어 어쩌면 전체 컨셉을 얻지 못할 수도 있습니다.Ionic Framework에서 이온 탭 외부의 뷰 만들기
아래쪽에 세 개의 탭이 있고 세 개의 탭 모두에 설정 아이콘이있는 간단한 응용 프로그램을 만들려고합니다. 아이콘을 클릭하면 탭이 숨겨져 설정 화면이 표시됩니다. 내가 어떤 내용을 풀어 사용자가 원하지 않기 때문에
, 모든 뷰가 글로벌 한 상속은 :
<ion-nav-view name="settings"></ion-nav-view>
<ion-tabs class="tabs-assertive tabs-icon-only">
<ion-tab title="Text" icon="icon ion-ios7-compose-outline" href="#/app/text">
<ion-nav-view name="compose-text"></ion-nav-view>
</ion-tab>
<ion-tab title="Draw" icon="icon ion-edit" href="#/app/draw">
<ion-nav-view name="compose-draw"></ion-nav-view>
</ion-tab>
<ion-tab title="Photo" icon="icon ion-ios7-camera-outline" href="#/app/photo">
<ion-nav-view name="compose-photo"></ion-nav-view>
</ion-tab>
</ion-tabs>
그리고 하나를 :
angular.module('app', ['ionic', 'debug']).config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
controller: 'AppController',
templateUrl: "ui/modules/tabs/view.html"
})
.state('app.compose-text', {
url: '/text',
views: {
'compose-text': {
templateUrl: 'ui/modules/text-composer/view.html'
}
}
})
.state('app.compose-draw', {
url: '/draw',
views: {
'compose-draw': {
templateUrl: 'ui/modules/draw-composer/view.html'
}
}
})
.state('app.compose-photo', {
url: '/photo',
views: {
'compose-photo': {
templateUrl: 'ui/modules/photo-composer/view.html'
}
}
})
.state('app.settings', {
url: '/settings',
views: {
'settings': {
controller: 'ui/modules/settings/ctrl.js',
templateUrl: 'ui/modules/settings/view.html'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/text');
});
angular.module('app').run(function($rootScope) {
});
그런 다음, tabs/view은 다음과 같습니다 보기 :
<ion-view title="Example" class="slide-left-right">
<ion-nav-buttons side="left">
<a class="button button-icon button-clear ion-ios7-gear-outline" href="#/app/settings"></a>
</ion-nav-buttons>
<ion-content padding="true">
<h1>Text</h1>
</ion-content>
</ion-view>
내가 궁금한 점은 : 그 버튼을 재사용 할 수있는 방법이 있습니까? 모든 전망? 그것들을 계속해서 반복해서 정의하는 것은 쓸모없는 것처럼 보입니다.
하지만 그건 진짜가 아닙니다. 설정을 클릭하면 템플릿에없는 많은 내용이 포함되어 있지만 다른보기 나 탭이 숨겨지지 않습니다.
일부 스크린 샷 :
http://forum.ionicframework.com/uploads/default/_optimized/410/778/37f711d3f9_312x500.png
은 무엇 이것에 대한 올바른 접근해야 하는가?