Hi all,
I’m new to Ionic and I started to make an easy app with a sidemenu, a page with a list of activites and a page for the activity details. I’ve started from sidemenu template and I’ve created a single page without the menu (the activity details page) but I’m not able to add a transition when I change from activity list to activity page and vice versa. Maybe I’m getting wrong with page routing:
app.js
config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html'
})
.state('app.in_corso', {
url: '/operazione',
views: {
'menuContent': {
templateUrl: 'templates/in_corso.html'
}
}
})
.state('attivita_dettagli', {
url: '/attivita_dettagli/:id',
templateUrl: 'templates/attivita_dettagli.html',
controller: 'AttivitaCtrl'
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});
in_corso.html
<ion-view view-title="Operazioni in corso" ng-controller="InCorsoCtrl" ng-init="load()"> <ion-content> <div ng-repeat="att in attivita"> <div class="list card attivita"> <a href="#/attivita_dettagli/{{att.id}}"> <div class="item item-header"> <h2>{{att.nome}}</h2> <span class="item-data">{{att.data}}</span> <div class="tipo-attivita" ng-show="att.tipo == 1"></div> </div> <div class="item item-body"> <table width="100%" cellspacing="0" border="0"> <tr> <th>Codice</th> <td>{{att.codice}}</td> </tr> <tr> <th>Materiali in carico</th> <td><i class="icon ion-record stato-materiali-{{att.materiali}}"></i></td> </tr> </table> </div> </a> </div> </div> </ion-content> </ion-view>
attivita_dettagli.html
<ion-view animation="slide-left-right"> <ion-header-bar class="bar-light"> <div class="buttons"> <button class="button icon ion-ios-arrow-back" ng-click="backToActivities()" nav-direction="back"></button> </div> <h1 class="title">{{attivita.nome}}</h1> </ion-header-bar> <ion-content> <div class="item"> <span class="item-title">Data</span> <span class="item-descr">{{attivita.data}}</span> </div> <div class="item"> <span class="item-title">Codice</span> <span class="item-descr">{{attivita.codice}}</span> </div> <div class="item longtext"> <span class="item-title">Descrizione</span> <div class="item-descr">{{attivita.descrizione}}</div> </div> <div style="padding:0 10px" ng-show="attivita.materiali == 1"> <button class="button button-block button-balanced" ng-click="scan()"> Prelievo materiale </button> </div> <ul class="list" ng-show="attivita.materiali == 2"> <div class="item item-divider">Lista materiali</div> <li class="item" ng-repeat="materiale in attivita.lista_materiali">{{materiale}}</li> </ul> <div style="padding:0 10px" ng-show="attivita.materiali != 1"> <button class="button button-block button-balanced"> Termina attività </button> </div> </ion-content> </ion-view>