0
私はちょっと頭を痛めつけています。私はタブ付きのイオンアプリを持っています。基本。私のタブの1つでは、マスター詳細リストが必要です。リストがあり、アイテムをクリックすると新しいページが表示されます。シンプル。しかし、私はちょっとルートを混乱させていると思います。イオンと角度：タブ付きのアプリのルート
<body ng-app="ionicApp">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Carte" icon="ion-map" href="#/tab/map">
<ion-nav-view name="map-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Compte" icon="ion-person" href="#/tab/account">
<ion-nav-view name="account-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Favorite" icon="ion-ios-cart" href="#/tab/favorite">
<ion-nav-view name="favorite-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Cave" icon="ion-ios-wineglass" ui-sref="tabs.cave">
<ion-nav-view name="cave-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/map.html" type="text/ng-template">
[...]
</script>
<script id="templates/account.html" type="text/ng-template">
[...]
</script>
<script id="templates/favorite.html" type="text/ng-template">
[...]
</script>
<script id="templates/nav-stack.html" type="text/ng-template">
<ion-view view-title="Tab Nav Stack">
<ion-content class="padding">
<p><img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p>
</ion-content>
</ion-view>
</script>
<script id="templates/cave.html" type="text/ng-template">
<ion-view title="Cave">
<ion-content>
<div class="list" ng-controller="CaveCtrl">
<a ng-repeat="wine in wines"
class="item item-thumbnail-left"
ui-sref=" tabs.cave.wine({ wineId: wine.id })" >
<img ng-src="{{ wine.image }}">
<h2>{{ wine.name }}</h2>
<h3>{{ wine.year }}</h3>
<p>{{ wine.appellation }}</p>
</a>
</div>
</ion-content>
</ion-view>
</script>
<script id="wine.html" type="text/ng-template">
<ion-header-bar class="bar bar-header bar-dark">
<h1 class="title">Wine details</h1>
</ion-header-bar>
<ion-content>
<h1>HI IT'S WORKING</h1>
</ion-content>
</script>
</body>
あり、私のapp.jsでのルートです：
.state('tabs.cave', {
url: "/cave",
views: {
'cave-tab': {
templateUrl: "templates/cave.html"
}
}
})
.state('wine', {
url: 'tab/cave/:wineId',
templateUrl: 'wine.html',
controller: 'WineCtrl'
});
$urlRouterProvider.otherwise("/tab/account");
は、そして、いくつかのコントローラ：
App.controller('CaveCtrl', function($scope, $location) {
$scope.wines = [
{ id: 1, year:'2010', appellation: 'saint-julien', name: 'Saint Julien du médoc', image:'img/Saint-Julien.png'},
{ id: 2, year:'2013', appellation: 'bordeaux', name: 'Seigneur de Paludate', image:'img/Seigneur-Paludate.jpg'},
{ id: 3, year:'2011', appellation: 'jurançon', name: 'Uroula', image:'img/Uroula.jpg'}
];
});
App.factory('Wines', function() {
var wines = [
{ id: 1, year:'2010', appellation: 'saint-julien', name: 'Saint Julien du médoc', image:'img/Saint-Julien.png'},
{ id: 2, year:'2013', appellation: 'bordeaux', name: 'Seigneur de Paludate', image:'img/Seigneur-Paludate.jpg'},
{ id: 3, year:'2011', appellation: 'jurançon', name: 'Uroula', image:'img/Uroula.jpg'}
]
return {
getById : function (id) {
return wines[ wines.lastIndexOf(id) ]
}
}
});
App.controller('WineCtrl', function($scope, $http, $stateParams, Wines) {
console.log(Wines);
});
任意のアイデアがいいだろう:)事前に