无法从州''解决'...'

时间:2015-02-01 16:57:20

标签: angularjs angular-ui-router

这是我第一次尝试使用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>

但我得到了

  

无法解决州''

中的'注册'

异常。这有什么问题?

6 个答案:

答案 0 :(得分:66)

这种错误通常意味着,(js)代码的某些部分未加载。 ui-sref内的状态缺失。

a working example

我不是离子专家,所以这个例子应该表明它会起作用,但是我使用了一些技巧(标签的父级)

这是一个有点调整的状态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

这是类似的Q&amp; A使用命名视图的示例(确保更好的解决方案) 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",
  });

答案 1 :(得分:37)

刚来这里分享我发生的事情。
您不需要指定父级,状态以面向文档的方式工作,而不是指定parent: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"
});

EDIT 警告,如果你想深入嵌套,我必须指定完整的路径。例如,您不能拥有像

这样的州
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
})

答案 2 :(得分:7)

我刚刚和Ionic有同样的问题。

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

回到应用程序后,我的州工作得很好。

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

答案 3 :(得分:2)

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

简单的解决方案是使用状态名称 - 基本上是car_single

car_return

在控制器中,您可以使用state.go(state name)

答案 4 :(得分:2)

我遇到了

引发错误的情况
$state.go('');

这很明显。我想这可以帮助将来的某个人。

答案 5 :(得分:1)

如Magus回答:

  

必须指定完整路径

抽象状态可用于为所有子状态url添加前缀。 但是请注意,抽象仍然需要一个ui视图,以便其子代填充。为此,您可以直接将其内联添加。

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

有关更多信息,请参见文档:https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views