$state.go not working for nested states

问题:

My problem described below is similar to the problem described as a bug here : https://forum.ionicframework.com/t/blocker-bug-with-state-go-navigation/11036 But since there is no concrete evidence of the above being a bug that is I have raised this problem here.

I am using angular ui router for routing in my app and I am faceing a very strange issue in the same. Here is my router config

 .state('test', {
    url: "/test",
    templateUrl     : "templates/session/finalprofile.html",
    controller      : 'LoginCtrl'
  }) 

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

 .state('app.feed', {
      url: '/feed',
      views: {
        'menuContent': {
          templateUrl: 'templates/feed.html',
          controller: 'PlaylistsCtrl'
        }
      }
    })

    .state('app.phabIssue', {
    url: '/phabIssue',
    views: {
      'menuContent': {
        templateUrl: 'templates/phabIssue.html',
        controller: 'Pabricatortrl'
      }
    }
  })

My first view is the login view with state name 'login' so I am inside my 'LoginCtrl'. As you can see that this is a non nested view.
Now when I use $state.go for routing. The following statement

$state.go('test')

works but

$state.go('app.feed')

doesn't work.

I am getting the following error

ionic.bundle.js:25642 TypeError: Cannot read property '@' of null at updateView (ionic.bundle.js:62346) at ionic.bundle.js:62337 at Scope.$broadcast (ionic.bundle.js:29477) at Object.load (ionic.bundle.js:49661) at Object.injectables.$template (ionic.bundle.js:49561) at Object.invoke (ionic.bundle.js:17762) at proceed (ionic.bundle.js:46577) at invoke (ionic.bundle.js:46573) at ionic.bundle.js:46552 at $Resolve.resolve (ionic.bundle.js:46656)

Similarly I can route to any of the state which is not nested.

@jbrown . This is the app route

  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl',
    onEnter: function($state, Auth){
        if(!Auth.isLoggedIn()){
           $state.go('login');
        }
    }

  })

And this is the menu.html in which I have added your code.

<ion-side-menus enable-menu-with-back-views="false">
<div ui-view="menuContent"></div>

  <ion-side-menu-content>

    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button class="button button-clear">
      <i class="ion-arrow-left-c"></i>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>

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

  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">App title</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <!-- <ion-item menu-close ng-click="login()"> -->
        <ion-item menu-close href="#/app/mainLogin">
          Login
        </ion-item>
        <ion-item menu-close href="#/app/feed">
          Feed
        </ion-item>
        <ion-item menu-close href="#/app/phabIssue">
          Phab
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

Am I making any mistake or is this not the correct way of routing or any bug? Kindly help me solve this.

回答1:

You need to set up the parent view and route for 'app' like this:

controller

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

Add a parent view incorporating the ui-view directive.

app.html

<div ui-view="menuContent"></div>

You can see it in action in this working plunk