angular.js - ionic的side menu和tabs結合的路由怎麼設定?
过去多啦不再A梦
过去多啦不再A梦 2017-05-15 17:02:10
0
1
513

我是用ionic的tab預設模板,然後需要加side menu這個功能,但是我在設定路由的時候不知該如何設置,是應該在tab下面接著這樣寫?

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

但是每次這樣都會跳到首頁面,而只有title顯示出來,內容區域號線被首頁的蓋住了,因此我新建了一個模板,為menu.html,我這樣定義了路由

  .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'
      }
    }
  })

但是卻沒有了切換動畫效果,這是什麼原因?

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

全部回覆(1)
習慣沉默

加個嵌套子路由應該就行了。

  .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');//跳转到首页

menu.html裡的內容就是原來的side menu專案裡menu.html模板,然後把視圖名稱menuContent改成side-menu就行了。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板