无法从状态“”解析“ ...”


98

这是我第一次尝试使用ui-router。

这是我的app.js

angular.module('myApp', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider){
  $urlRouterProvider.otherwise("/index.html");

  $stateProvider.state('index', {
    url: '/'
    template: "index.html",
    controller: 'loginCtrl'
  });


  $stateProvider.state('register', {
    url: "/register"
    template: "register.html",
    controller: 'registerCtrl'
  });
})

如您所见,我有两种状态。我正在尝试这样注册状态:

<a ui-sref="register">
  <button class="button button-balanced">
    Create an account
  </button>
</a>

但是我越来越

无法从状态“解析”“注册”

例外。这里有什么问题?


这有点愚蠢,但是我看到您正在创建模块“ myApp”,并将“ ionic”列为依赖项,但是,我没有看到“ ui-router”列为依赖项。您是否在其他地方包括它?
deadbabykitten'5

3
@deadbabykitten,由ionic负责。
Rogers Sampaio 2015年

1
@RogersSampaio-我最近才发现,我以前从未使用过离子技术,但现在正在将其用于移动项目。太不可思议了。
deadbabykitten

Answers:


69

这种错误通常表示(JS)代码的某些部分未加载。里面的状态ui-sref不见了。

一个可行的例子

我不是离子技术方面的专家,因此此示例应表明它可以正常工作,但是我使用了更多技巧(用于制表符的父级)

这是一个调整后的状态def:

.config(function($stateProvider, $urlRouterProvider){
  $urlRouterProvider.otherwise("/index.html");

    $stateProvider

    .state('app', {
      abstract: true,
      templateUrl: "tpl.menu.html",
    })

  $stateProvider.state('index', {
    url: '/',
    templateUrl: "tpl.index.html",
    parent: "app",
  });


  $stateProvider.state('register', {
    url: "/register",
    templateUrl: "tpl.register.html",
    parent: "app",
  });

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

这是带有选项卡及其内容的父视图:

<ion-tabs class="tabs-icon-top">

  <ion-tab title="Index" icon="icon ion-home" ui-sref="index">
    <ion-nav-view name=""></ion-nav-view>
  </ion-tab>

  <ion-tab title="Register" icon="icon ion-person" ui-sref="register">
    <ion-nav-view name=""></ion-nav-view>
  </ion-tab>

</ion-tabs>

将其作为一个如何使其运行并随后以正确方式使用ionic框架的示例进行更多说明... 在此处查看该示例

这是类似的问答,其中包含使用命名视图(以确保更好的解决方案) 离子路由问题的示例,显示空白页

选项卡中带有命名视图的改进版本在这里:http : //plnkr.co/edit/Mj0rUxjLOXhHIelt249K?p=preview

  <ion-tab title="Index" icon="icon ion-home" ui-sref="index">
    <ion-nav-view name="index"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Register" icon="icon ion-person" ui-sref="register">
    <ion-nav-view name="register"></ion-nav-view>
  </ion-tab>

定位命名视图:

  $stateProvider.state('index', {
    url: '/',
    views: { "index" : { templateUrl: "tpl.index.html" } },
    parent: "app",
  });


  $stateProvider.state('register', {
    url: "/register",
    views: { "register" : { templateUrl: "tpl.register.html", } },
    parent: "app",
  });

我的路线看起来还不错,我检查了其他离子示例,代码也一样。我将一些调试器,console.log和警报放入该配置函数中,但均未执行。如何确定我的路线已加载?我能以某种方式看到他们吗?
Sefa 2015年

4
如果我想知道已注册的状态,通常会在.run()方法中注入$ state信息。然后,您可以执行console.log($ states.get()),它将返回状态数组。 .run ($state) { console.log($states.get()); });
deadbabykitten 2015年

37

刚来这里是为了分享我发生的一切。
您无需指定父级,状态以面向文档的方式工作,因此,无需指定父级:app,您只需将状态更改为app.index

.config(function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise("/index.html");

$stateProvider.state('app', {
  abstract: true,
  templateUrl: "tpl.menu.html"
});

$stateProvider.state('app.index', {
    url: '/',
    templateUrl: "tpl.index.html"
});

$stateProvider.state('app.register', {
    url: "/register",
    templateUrl: "tpl.register.html"
});

编辑警告,如果您想深入嵌套,则必须指定完整路径。例如,您不能拥有类似

app.cruds.posts.create

没有一个

app
app.cruds
app.cruds.posts

否则angular会抛出一个异常,说明无法确定溃败。为了解决这个问题,您可以定义抽象状态

.state('app', {
     url: "/app",
     abstract: true
})
.state('app.cruds', {
     url: "/app/cruds",
     abstract: true
})
.state('app/cruds/posts', {
     url: "/app/cruds/posts",
     abstract: true
})

9
谢谢EDIT Warning, if you want to go deep in the nesting, the full path must me specified. For example, you can't have a state like,那是我的问题。
最多

我遇到了与上述相同的问题,但还想在状态名称路径中包含某些内容,而这些内容不会反映在路由路径中,因此您可以排除url中间状态的属性,然后将以下路由url附加到先前的路线网址。
尼克M,

7

我刚刚在Ionic遇到了同样的问题。

事实证明,我的代码没有错,我只需要退出离子服务会话并再次运行离子服务即可。

回到应用程序后,我的状态正常。

如果您正在运行gulp,我还建议您几次按一下app.js文件上的save,以确保重新编译所有内容。


1
在我的情况下,重新启动服务器并不能解决问题,但是可以帮助我调试一个更好的错误。谢谢!
Magus

3

离子路由也有同样的问题。

简单的解决方案是使用状态名称-基本上 state.go(state name)

.state('tab.search', {
    url: '/search',
    views: {
      'tab-search': {
        templateUrl: 'templates/search.html',
        controller: 'SearchCtrl'
      }
    }
  })

在控制器中,您可以使用 $state.go('tab.search');


2

我有一个错误是由

$state.go('');

这是显而易见的。我想这可以在将来帮助某人。


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.