Question

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

我正在使用角度ui路由器在我的应用程序中进行路由，我正面临一个非常奇怪的问题。这是我的路由器配置

 .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'
      }
    }
  })

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

$ state.go（ '试验'）

有效但

$ state.go（ 'app.feed'）

不起作用。

我收到以下错误

ionic.bundle.js：25642 TypeError：无法读取null的属性'@' 在updateView（ionic.bundle.js：62346） at ionic.bundle.js：62337 在Scope。$ broadcast（ionic.bundle.js：29477） at Object.load（ionic.bundle.js：49661）在Object.injectables。$ template（ionic.bundle.js：49561） at Object.invoke（ionic.bundle.js：17762）在继续（ionic.bundle.js：46577）在invoke（ionic.bundle.js：46573） at ionic.bundle.js：46552 at $ Resolve.resolve（ionic.bundle.js：46656）

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

@jbrown。这是应用路径

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

  })

这是我添加了您的代码的menu.html。

<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>

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

Answer 1

您需要设置父视图并为'app'设置路线，如下所示：

<强>控制器

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

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

<强> app.html

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

您可以在此工作plunk

中看到它的实际效果

$ state.go不适用于嵌套状态

1 个答案: