angularjs – 如何在Ionic中设置带有标签的sidemenu？

在我看来,有一个侧面菜单,对于像设置和关于页面的东西,结合主应用程序的选项卡是一个非常重要和标准的应用程序界面.谷歌的Messenger应用程序就是这样的.

我正在努力让它发挥作用,我看到有很多问题,但很少有令人满意的信息.我把侧面菜单与swipeBoxes结合在了一起.这应该很简单.我曾经使用jQuery Mobile为我的应用程序,它比Ionic更笨重,但做这样的界面很容易,它运作良好.

我遇到的问题是选项卡模板没有加载到选项卡中.这可能是我想要的傻事,但这是我的app.js代码片段：

config(function($stateProvider,$urlRouterProvider) {
  $stateProvider

  .state('app',{
    url: "/app",abstract: true,templateUrl: "templates/menu.html",controller: 'AppCtrl'
  })

  .state('app.tabs',{
    url: "/tabs",views: {
      'menuContent': {
        templateUrl: "templates/tabs.html"
      }
    }
  })

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

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

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

    .state('app.about',{
      url: "/about",views: {
        'menuContent': {
          templateUrl: "templates/about.html",controller: 'aboutCtrl'
        }
      }
  });
  // if none of the above states are matched,use this as the fallback
  $urlRouterProvider.otherwise('/app/tabs');
});

侧边菜单工作正常,我可以使用它导航到about页面或返回选项卡.选项卡的作用是它们更改焦点并且图标会更改颜色,但模板不会加载到它们中.我已经三次检查了网址名称.

有谁知道如何做到这一点？如果我在某个地方犯了一个小错误并让它正常工作,我会将Codepen作为如何创建这个,imho,非常需要的界面的一个例子.

编辑：按要求.

<ion-tabs class="tabs-icon-top tabs-color-active-assertive">  

  <ion-tab title="tab1" icon="ion-man" href="#/tab/tab1">
    <ion-nav-view name="tab-tab1"></ion-nav-view>
  </ion-tab>

  <ion-tab title="tab2" icon="ion-person-stalker" href="#/tab/tab2">
    <ion-nav-view name="tab-tab2"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Extras" icon="ion-heart" href="#/tab/extras">
    <ion-nav-view name="tab-extras"></ion-nav-view>
  </ion-tab>

</ion-tabs>

我认为他们都匹配,不是吗？

注意 – 关于这是一个重复的查询;我的应用程序是一个标签式应用程序,在基页上有一个侧边菜单.另一个问题是关于一个包含一系列部分的应用程序,其中一个部分有标签.它完全是一个不同的结构.

我认为你的路由有点偏离 – 你的孩子状态没有完全声明标签.你已经宣布他们是这样的

.state('tab.tab1',{

…并且您从未声明父标签状态.所以他们被“悬挂”直到宣布父州.在这种情况发生之前,ui-router会忽略它们.

试试这个

config(function($stateProvider,views: {
      'menuContent': {
        templateUrl: "templates/tabs.html"
      }
    }
  })

.state('app.tabs.tab1',{
      url: '/tab1',controller: 'tab1Ctrl'
        }
      }
    })

.state('app.tabs.tab2',{
      url: '/tab2',controller: 'tab2Ctrl'
        }
      }
    })

.state('app.tabs.extras',{
    url: '/extras',use this as the fallback
  $urlRouterProvider.otherwise('/app/tabs');
});

并且更好/更清楚地使用ui-sref而不是在标签模板中使用href – 更容易看到某些状态映射到哪些状态

<ion-tabs class="tabs-icon-top tabs-color-active-assertive">  

  <ion-tab title="tab1" icon="ion-man" ui-sref="app.tabs.tab1">
    <ion-nav-view name="tab-tab1"></ion-nav-view>
  </ion-tab>

  <ion-tab title="tab2" icon="ion-person-stalker" ui-sref="app.tabs.tab2">
    <ion-nav-view name="tab-tab2"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Extras" icon="ion-heart" ui-sref="app.tabs.extras">
    <ion-nav-view name="tab-extras"></ion-nav-view>
  </ion-tab>

</ion-tabs>

没有测试它,但我认为应该修复它！控制台BTW中的任何错误？

原文链接：https://www.f2er.com/angularjs/240494.html

angularjs – 如何在Ionic中设置带有标签的sidemenu？

猜你在找的Angularjs相关文章