$state.go 不适用于嵌套状态 [英] $state.go not working for nested states

问题描述

我下面描述的问题类似于这里描述为错误的问题:https://forum.ionicframework.com/t/blocker-bug-with-state-go-navigation/11036但是由于没有具体的证据表明上述是一个错误，所以我在这里提出了这个问题.

我正在使用 angular ui 路由器在我的应用程序中进行路由，同时我也面临着一个非常奇怪的问题.这是我的路由器配置

 .state('test', {网址:/测试"，templateUrl : "templates/session/finalprofile.html",控制器:'登录控制'}).state('登录', {网址:/登录"，templateUrl : "templates/mainLogin.html",控制器:'登录控制'}).state('app.feed', {网址:'/饲料'，意见:{'菜单内容':{templateUrl: 'templates/feed.html',控制器:'播放列表Ctrl'}}}).state('app.phabIssue', {url: '/phabIssue',意见:{'菜单内容':{templateUrl: 'templates/phabIssue.html',控制器:'Pabricatortrl'}}})

我的第一个视图是状态名称为login"的登录视图，所以我在我的LoginCtrl"中.如您所见，这是一个非嵌套视图.
现在当我使用 $state.go 进行路由时.以下声明

<块引用>

$state.go('test')

有效但

<块引用>

$state.go('app.feed')

不起作用.

我收到以下错误

<块引用>

ionic.bundle.js:25642 TypeError: 无法读取 null 的属性@"在 updateView (ionic.bundle.js:62346)在 ionic.bundle.js:62337在 Scope.$broadcast (ionic.bundle.js:29477)在 Object.load (ionic.bundle.js:49661)在 Object.injectables.$template (ionic.bundle.js:49561)在 Object.invoke (ionic.bundle.js:17762)在进行中 (ionic.bundle.js:46577)在调用 (ionic.bundle.js:46573)在 ionic.bundle.js:46552在 $Resolve.resolve (ionic.bundle.js:46656)

同样，我可以路由到任何未嵌套的状态.

@jbrown.这是应用路由

 .state('app', {网址:'/应用'，摘要:真实，templateUrl: 'templates/menu.html',控制器:'AppCtrl'，onEnter: 函数($state, Auth){if(!Auth.isLoggedIn()){$state.go('登录');}}})

这是我在其中添加了您的代码的 menu.html.

<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"></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">应用标题</h1></ion-header-bar><离子含量><离子列表><!-- <ion-item menu-close ng-click="login()">--><ion-item menu-close href="#/app/mainLogin">登录</ion-item><ion-item menu-close href="#/app/feed">喂养</ion-item><ion-item menu-close href="#/app/phabIssue">帕布</ion-item></ion-list></离子含量></ion-side-menu></ion-side-menus>

我是否犯了任何错误，或者这不是正确的路由方式或任何错误?请帮我解决这个问题.

解决方案

你需要像这样为app"设置父视图和路由:

控制器

.state('app', {网址:'/应用'，模板网址:'app.html'})

添加包含 ui-view 指令的父视图.

app.html

您可以在这个有效的 plunk

中看到它的作用

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.

解决方案

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

这篇关于$state.go 不适用于嵌套状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！