javascript - tab and side menu - links to state does not work

I've built the structure of my application based on this answer:

How to set up sidemenu with tabs in Ionic?

bining side menu and tabs:

my app.js file look like this:

$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('app.tabs1.general', {
  url: '/tabs1-general',
  views: {
    'general-tab': {
      templateUrl: 'templates/general1.html',
      controller: 'General1Ctrl'
    }
  }
})
.state('app.tabs2', {
  url: '/tabs2',
  views: {
    'menuContent': {
      templateUrl: 'templates/tabs2.html'
    }
  }
})
.state('app.tabs2.general', {
  url: '/tabs2-general',
  views: {
    'general2-tab': {
      templateUrl: 'templates/general2.html',
      controller: 'General1Ctrl'
    }
  }
})

$urlRouterProvider.otherwise('/app/ofertas/ofertas-reporte');

everything works fine when I test all routes setting the route at the otherwise method of urlRouterProvider, but when I set the routes at the side bar items the URL's do not match:

Here my menu:

<ion-content>
  <ion-list class="coloredList">
    <ion-item class="sap-color" menu-close href="#/app/tabs1">
      <i class="ion-pose"></i> tabs1
    </ion-item>
   <ion-item class="sap-color" menu-close href="#/app/tabs2">
      <i class="ion-android-star"></i> tabs2
    </ion-item>
 ...

I've tried to ui-sref as well, but nothing seems to work.

Any advice?

I've built the structure of my application based on this answer:

How to set up sidemenu with tabs in Ionic?

bining side menu and tabs:

my app.js file look like this:

$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('app.tabs1.general', {
  url: '/tabs1-general',
  views: {
    'general-tab': {
      templateUrl: 'templates/general1.html',
      controller: 'General1Ctrl'
    }
  }
})
.state('app.tabs2', {
  url: '/tabs2',
  views: {
    'menuContent': {
      templateUrl: 'templates/tabs2.html'
    }
  }
})
.state('app.tabs2.general', {
  url: '/tabs2-general',
  views: {
    'general2-tab': {
      templateUrl: 'templates/general2.html',
      controller: 'General1Ctrl'
    }
  }
})

$urlRouterProvider.otherwise('/app/ofertas/ofertas-reporte');

everything works fine when I test all routes setting the route at the otherwise method of urlRouterProvider, but when I set the routes at the side bar items the URL's do not match:

Here my menu:

<ion-content>
  <ion-list class="coloredList">
    <ion-item class="sap-color" menu-close href="#/app/tabs1">
      <i class="ion-pose"></i> tabs1
    </ion-item>
   <ion-item class="sap-color" menu-close href="#/app/tabs2">
      <i class="ion-android-star"></i> tabs2
    </ion-item>
 ...

I've tried to ui-sref as well, but nothing seems to work.

Any advice?

Share Improve this question edited May 23, 2017 at 12:17 CommunityBot 11 silver badge asked Oct 31, 2016 at 7:45 Jose Rojas 3,5303 gold badges28 silver badges42 bronze badges

Check out this demo plnkr.co/edit/T1qr0BWWbtLfHQRJQGJf?p=preview and see my below answer. Post your ments on this – Pitchiah Natarajan Commented Nov 10, 2016 at 16:02

Add a ment |

5 Answers 5

Sorted by: Reset to default 4 +25

It seems like something is wrong with the routes, can you try this :

$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('app.tabs1', {
    url: "/tabs1",
     abstract: true,
     views: {
         'menuContent': {
               templateUrl: "templates/tabs1.html",
                controller: "Tabs1Ctrl"
           }
      }
})
.state('app.tabs1.general', {
  url: '/tabs1-general',
  views: {
    'general-tab': {
      templateUrl: 'templates/general1.html',
      controller: 'General1Ctrl'
    }
  }
})
.state('app.tabs2', {
  url: '/tabs2',
  abstract: true,
  views: {
    'menuContent': {
      templateUrl: 'templates/tabs2.html'
    }
  }
})
.state('app.tabs2.general', {
  url: '/tabs2-general',
  views: {
    'general2-tab': {
      templateUrl: 'templates/general2.html',
      controller: 'General1Ctrl'
    }
  }
})

$urlRouterProvider.otherwise('/app/ofertas/ofertas-reporte');

Checkout this project: https://github./mircobabini/ionic-sidemenu-tabs-together I think this does what you need. It's a older project and might need some updating but it will works as a startingpoint. There is a demo in a codepen, the link is on github.

Your child states are not well declared app.tabs1.general needs to have an app.tabs1 state with abstract=true before declaring the app.tabs1.general state for example. And so on for the rest of your states like the code below :

$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('app.tabs1', {
   url: "/tabs1",
   abstract: true,
   views: {
     'menuContent': {
           templateUrl: "templates/tabs1.html",
            controller: "Tabs1Ctrl"
       }
  }
})
.state('app.tabs1.general', {
 url: '/tabs1-general',
 views: {
 'general-tab': {
  templateUrl: 'templates/general1.html',
  controller: 'General1Ctrl'
}
}
})
.state('app.tabs2', {
  url: '/tabs2',
  abstract: true,
  views: {
   'menuContent': {
   templateUrl: 'templates/tabs2.html'
  }
 }
})
.state('app.tabs2.general', {
  url: '/tabs2-general',
  views: {
  'general2-tab': {
  templateUrl: 'templates/general2.html',
  controller: 'General1Ctrl'
 }
}
 })

You also need to use in your HTML ui-sref equals your state not href :

<ion-content>
 <ion-list class="coloredList">
  <ion-item class="sap-color" menu-close ui-sref="app.tabs1">
  <i class="ion-pose"></i> tabs1
  </ion-item>
  <ion-item class="sap-color" menu-close href="app.tabs2">
  <i class="ion-android-star"></i> tabs2
  </ion-item>
 ...

It is from one of my older projects. (http://aitam.newtonjoshua.)

Documentation: https://newtonjoshua./apps/aitam/aitam.html

It is all about the usage of ion-nav-view which takes care of ui routing.

SideMenu:

app.js: In the below example there is a side menu which has a view menuContent

menu.html: Based on the selection(tab1 or tab2) the contents menuContent will be either tab1.html or tab2.html

Tabs:

app.js: tab1 has views tab1-general(n) and tab2 has views tab2-general(n)

tab1.html/tab2.html: based on the selection of the tab the corresponding html content will be displayed.

app.js

// app.js

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


            //tab1

            .state('app.tab1', {
                url: "/tab1",
                views: {
                    // view name: menuContent
                    'menuContent': {
                        templateUrl: "templates/tab1.html",
                        controller: 'tabs1Ctrl'
                    }
                }
            })

            .state('app.tab1.general1', {
                url: '/general1',
                views: {
                    // view name: tab1-general1
                    'tab1-general1': {
                        templateUrl: 'templates/tab1-general1.html',
                        controller: 'general1Ctrl'
                    }
                }
            })

            //tab2

            .state('app.tab2', {
                url: "/tab2",
                views: {
                    // view name: menuContent
                    'menuContent': {
                        templateUrl: "templates/tab2.html",
                        controller: 'tabs2Ctrl'
                    }
                }
            })

            .state('app.tab2.general2', {
                url: '/general2',
                views: {
                    // view name: tab2-general2
                    'tab2-general2': {
                        templateUrl: 'templates/tab2-general2.html',
                        controller: 'general2Ctrl'
                    }
                }
            });
        // if none of the above states are matched, use this as the fallback
        $urlRouterProvider.otherwise('/app/home');

menu.html

<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content >
        <ion-nav-bar class="bar-navy" >
            <ion-nav-buttons side="left" >
                <button ng-show="sideMenu" class="button button-icon button-clear ion-navicon" menu-toggle="left">
                </button>
            </ion-nav-buttons>
        </ion-nav-bar>

        <!--view name: menuContent-->
        <ion-nav-view name="menuContent"></ion-nav-view>

    </ion-side-menu-content>

    <ion-side-menu side="left">
        <ion-header-bar class="bar-navy">
            <h1 class="title" style="color:white">APP NAME</h1>
        </ion-header-bar>
        <ion-content>
            <ion-list>
                <ion-item nav-clear menu-close href="#/app/tab1" class="item-icon-left">
                    TAB 1
                </ion-item>
                <ion-item nav-clear menu-close href="#/app/tab2" class="item-icon-left">
                    TAB 2
                </ion-item>
                <ion-item nav-clear menu-close href="#/app/home" class="item-icon-left">
                    Home
                </ion-item>
            </ion-list>

        </ion-content>
    </ion-side-menu>
</ion-side-menus>

tab1.html

<ion-view view-title="TAB 1">
    <ion-content class="padding">
        TAB 1
    </ion-content>
    <ion-tabs id="tab1" class="tabs-icon-bottom">

        <ion-tab title="Tab 1 - General 1" icon-off="ion-ios-pie-outline" icon-on="ion-ios-pie" href="#/app/tab1/general1">

            <!--view name: tab1-general1-->
            <ion-nav-view name="tab1-general1"></ion-nav-view>

        </ion-tab>

        <ion-tab title="Tab 1 - General 2" icon-off="ion-ios-list-outline" icon-on="ion-ios-list" href="#/app/tab1/general2">
            <ion-nav-view name="tab1-general2"></ion-nav-view>
        </ion-tab>

    </ion-tabs>
</ion-view>

tab2.html

<ion-view view-title="TAB 2">
    <ion-content class="padding">
        TAB 2
    </ion-content>
    <ion-tabs id="tab2" class="tabs-icon-bottom">

        <ion-tab title="Tab 2 - General 1" icon-off="ion-ios-pie-outline" icon-on="ion-ios-pie" href="#/app/tab2/general1">
            <ion-nav-view name="tab2-general1"></ion-nav-view>
        </ion-tab>

        <ion-tab title="Tab 2 - General 2" icon-off="ion-ios-list-outline" icon-on="ion-ios-list" href="#/app/tab2/general2">

              <!--view name: tab2-general2-->
            <ion-nav-view name="tab2-general2"></ion-nav-view>

        </ion-tab>

    </ion-tabs>
</ion-view>

Check for other HTML and DEMO in this link http://plnkr.co/edit/T1qr0BWWbtLfHQRJQGJf?p=preview

JS:

angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

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

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

  .state('app.tabs1-general', {
    url: '/tabs1-general',
    views: {
      'menuContent': {
        templateUrl: 'general1.html'
      }
    }
  })

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

  .state('app.tabs2-general', {
    url: '/tabs2-general',
    views: {
      'menuContent': {
        templateUrl: 'general2.html'
      }
    }
  })

  $urlRouterProvider.otherwise('/app/tabs');
});

HTML:

<ion-side-menus>
  <ion-side-menu-content>
    <ion-header-bar class="bar-header">
      <button class="button button-icon icon ion-navicon" menu-toggle="left"></button>
    </ion-header-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>
  <ion-side-menu side="left">
    <ion-content>
      <ion-list class="coloredList">
        <ion-item class="sap-color" menu-close href="#/app/tabs">
          <i class="ion-pose"></i> tabs1
        </ion-item>
        <ion-item class="sap-color" menu-close href="#/app/tabs2">
          <i class="ion-android-star"></i> tabs2
        </ion-item>
        <ion-item class="sap-color" menu-close href="#/app/tabs1-general">
          <i class="ion-pose"></i> tabs1-general
        </ion-item>
        <ion-item class="sap-color" menu-close href="#/app/tabs2-general">
          <i class="ion-android-star"></i> tabs2-general
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - tab and side menu - links to state does not work - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)