angulaire.js - Comment configurer un routage combinant le menu latéral et les onglets d'Ionic ?

Question

J'utilise le modèle d'onglet par défaut d'Ionic, puis je dois ajouter la fonction de menu latéral, mais je ne sais pas comment la configurer lors de la configuration du routage. Dois-je écrire ceci sous l'onglet ?

  .state('tab.login',{
    url:'/login',
    views:{
      'tab-login':{
        templateUrl:'templates/login.html',
        controller:'LoginCtrl'
      }
    }
  })

Mais à chaque fois que cela passe à la page d'accueil, et que seul le titre est affiché, la ligne numérique de la zone de contenu est couverte par la page d'accueil, j'ai donc créé un nouveau modèle, menu.html, et j'ai défini l'itinéraire comme ceci

  .state('menu',{
    url:'/menu',
    abstract:true,
    templateUrl: 'templates/menu.html'
  })
  .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })

  // Each tab has its own nav history stack:

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })
  .state('menu.login',{
    url:'/login',
    views:{
      'menu-login':{
        templateUrl:'templates/login.html',
        controller:'LoginCtrl'
      }
    }
  })

Mais il n'y a pas d'effet d'animation de commutation. Quelle en est la raison ?

Answer 1

Il devrait suffire d'ajouter une sous-route imbriquée.

  .state('tab.dash', {
    url: '/dash',
    abstract:true,//设为抽象
    views: {
      'tab-dash': {
        templateUrl: 'templates/menu.html',
        controller: 'MenuCtrl'
      }
    }
  })
  .state('tab.dash.firstPage', {
    url: '/firstPage',
    views: {
      'side-menu': {
        templateUrl: 'templates/firstPage.html',
        controller: 'MyCtrl'
      }
    }
  })
$urlRouterProvider.otherwise('/tab/dash/firstPage');//跳转到首页

Le contenu de menu.html est le modèle menu.html du projet de menu latéral d'origine, puis changez simplement le nom de la vue menuContent en side-menu.