angulaire.js - Comment configurer un routage combinant le menu latéral et les onglets d'Ionic ?
过去多啦不再A梦
过去多啦不再A梦 2017-05-15 17:02:10
0
1
511

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 ?

过去多啦不再A梦
过去多啦不再A梦

répondre à tous(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.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal