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

Question

这是我第一次尝试使用 ui-路由器。

这是我的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>

但我得到

Could not resolve 'register' from state ''

异常。这里有什么问题？

Answer 1

这种错误通常意味着（JS）代码的某些部分没有加载。 ui-sref 中的状态丢失了。

有a working example

我不是 ionic 方面的专家，所以这个例子应该表明它可以工作，但我使用了更多技巧（制表符的父项）

这是一个稍微调整过的状态 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>

多举一个如何制作它的例子运行，然后以正确的方式使用离子框架...检查那个例子here

这是一个类似的问答，其中包含一个使用命名视图的示例 （肯定是更好的解决方案） ionic routing issue, shows blank page

选项卡中带有命名视图的改进版本在这里：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",
  });

Answer 2

我刚刚遇到了与 Ionic 相同的问题。

事实证明我的代码没有任何问题，我只需要退出 ionic serve 会话并再次运行 ionic serve。

回到应用程序后，我的状态运行良好。

如果您运行宁 gulp，我还建议在您的 app.js 文件上按保存几次，以确保所有内容都得到重新编译。

Answer 3

只是来这里分享发生在我身上的事情。
您不需要指定父级，状态以面向文档的方式工作，因此，无需指定父级：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
})

Answer 4

Ionic 路由也有同样的问题。

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

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

并且在控制器中你可以使用$state.go('tab.search');

Answer 5

我遇到过

抛出错误的情况

$state.go('');

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

Answer 6

正如 Magus 的回答：

the full path must me specified

抽象状态可用于为所有子状态 url 添加前缀。但是请注意，abstract 仍然需要一个 ui-view 来为其子级填充 。为此，您只需将其内联添加即可。

.state('app', {
   url: "/app",
   abstract: true,
   template: '<ui-view/>'
})

有关详细信息，请参阅文档：https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

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

Could not resolve '...' from state ''

angularjs

angular-ui-router