marklagendijk / ui-router.stateHelper

A helper module for AngularUI Router, which allows you to define your states as an object tree.
MIT License
235 stars 40 forks source link

Can't resolve 'app.user.home' from state '' where user is a child abstract state of abstract state app #28

Open bmwertman opened 8 years ago

bmwertman commented 8 years ago

After trying to use the stateHelper to reorganize my app's menu layout I'm getting an error;

Error: Could not resolve 'app.user.home' from state ''
    at Object.transitionTo (ionic.bundle.js:49177)
    at Object.go (ionic.bundle.js:49110)
    at app.js:220

This happens when my app loads and $state.go('app.user.home') runs on app.js:220

My situation is that admin users are shown a "hamburger stack" icon that opens a side menu with certain views only admins can navigate to.

When a non-admin enters the same view they are shown a "home" icon instead that links to the home view.

Both admins and non-admins have the home view which has ui-sref links to additional views they can both navigate to.

When the "hamburger icon" is shown for an admin the ui-sref to the home view is moved to the side menu.

This is my stateHelperProvider code;

.config(function(stateHelperProvider, $urlRouterProvider, $ionicConfigProvider) {

  stateHelperProvider

  .state({
    name: 'app',
    url: '/',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'MenuCtrl',
  })
  .state({
    name: 'app.user',
    url: '/user',
    abstract: true,
    children:[
      {
        name: 'app.user.home',
        url: '/home',
        templateUrl: 'templates/landing.html',
        controller: 'HomeCtrl'
      },
      {
        name: 'app.user.board',
        url: '/board',
        templateUrl: 'templates/pta-board.html',
        controller: 'BoardCtrl'
      },
      {
        name: 'app.user.events',
        url: 'events',
        templateUrl: 'templates/events.html',
        controller: 'EventsCtrl'
      },
      {
        name: 'app.user.chatrooms',
        url: '/chat-rooms',
        templateUrl: 'templates/chat-rooms.html',
        controller: 'RoomsCtrl',
        children:[
          {
            name: 'app.user.chatrooms.chatroom',
            url: '/room',
            templateUrl: 'templates/chat-room.html',
            params:{
              roomId: null,
              chatters: null
            },
            controller: 'ChatCtrl'
          }
        ]
      },
      {
        name: 'app.user.profile',
        url: '/profile',
        templateUrl: 'templates/user-profile.html',
        params:{
          isNewUser: null
        },
        controller: 'UserCtrl'
      },
      { name: 'app.user.admin',
        url: 'admin',
        abstract: true,
        children:[
          {
            name: 'app.user.admin.calendar',
            url: '/calendar',
            params:{
              selectedEvent: null,
              calendarTitle: 'Volunteer',
              isVolunteerSignup: true
            },
            templateUrl: 'templates/rcalendar.html',
            controller: 'CalendarCtrl'
          },
          {
            name: 'app.user.admin.volunteers',
            url: '/volunteers',
            params:{
              thisHoursVolunteers: null,
              thisEvent: null
            },
            templateUrl: 'templates/admin-interact.html',
            controller: 'VolunteerCtrl'
          },
          {
            name: 'app.user.admin.roles',
            url: '/roles',
            templateUrl: 'templates/roles.html',
            controller: 'RoleCtrl'
          },
          {
            name: 'app.user.admin.settings',
            url: '/settings',
            templateUrl: 'templates/settings.html',
            controller: 'SettingsCtrl'
          }
        ]
      }
    ]
  })

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

  .state({
    name: 'signup',
    url: '/signup',
    templateUrl: 'templates/signup.html',
    controller : 'SignupCtrl'
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/home');
  $ionicConfigProvider.scrolling.jsScrolling(false);
});

My side menu, menu.html, template;

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar ng-class="{'has-subject': subject}" 
                 class="white-font bar-header bar-positive">
      <!-- <ion-nav-back-button></ion-nav-back-button> -->
      <ion-nav-buttons side="left" >
        <button ng-if="$root.isAdmin" class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
        <button ng-if="!$root.isAdmin" class="button button-icon button-clear ion-home" ui-sref="app.user.home">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view> <!-- ionic's equivalent to ui-view -->    
  </ion-side-menu-content>
  <ion-side-menu class="side-menu" width="140" side="left">
    <ion-header-bar class="white-font bar-header bar-positive">
      <h1 class="title">Admin Menu</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close>
          <a class="button button-block button-clear button-dark" ui-sref="app.user.admin.calendar({ calendarTitle: 'Calendar', isVolunteerSignup: false })">Calendar</a>
        </ion-item>
        <ion-item menu-close>
          <a class="button button-block button-clear button-dark" ui-sref="app.user.admin.roles">Roles</a>
        </ion-item>
        <ion-item menu-close>
          <a class="button button-block button-clear button-dark" ui-sref="app.user.home">Main Menu</a>
        </ion-item>
        <ion-item menu-close>
          <a class="button button-block button-clear button-dark" ui-sref="app.user.admin.settings">School Settings</a>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

And then my home view;

<ion-view class="landing" title="{{school.name}}">
  <div ng-if="school.logo" class="tall bar bar-header">
    <img class="school-logo" ng-src="{{school.logo}}" >
  </div>
  <ion-content ng-class="{'has-tall-header': school.logo}">
    <ion-list class="nav-buttons">
      <ion-item>
        <a class="button button-block button-clear button-dark" ui-sref="app.user.board">
          PTA Board
          <i class="icon ion-board"></i>
        </a>
      </ion-item>        
      <ion-item>
        <a class="button button-block button-clear button-dark" ui-sref="app.user.events">
          Events
          <i class="icon ion-calendar"></i>
        </a>
      </ion-item>
      <ion-item>
        <a class="button button-block button-clear button-dark" ui-sref="app.user.rooms">
          Chat
          <i class="icon ion-chatboxes"></i>
        </a>
      </ion-item>
      <ion-item>
        <a class="button button-block button-clear button-dark" ui-sref="app.user.profile">
          Profile
          <i class="icon ion-android-user-menu"></i>
        </a>
      </ion-item>
      <ion-item>
        <a class="button button-block button-clear button-dark" ng-click="logout()">
          Logout
          <i class="icon ion-log-out"></i>
        </a>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>
SergkeiM commented 7 years ago

Hi, try adding { keepOriginalNames: true }

kevingatera commented 7 years ago

Hello guys. Did the answer provided by @Froxz work for you?

ghost commented 6 years ago

Hi, { keepOriginalNames: true } its working ???