web-dev-qa-db-ja.com

状態 ''から '...'を解決できませんでした

これは私が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'
  });
})

ご覧のとおり、私には2つの状態があります。私はこのように状態を登録しようとしています：

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

しかし、私はなっています

「登録」を状態「」から解決できませんでした

例外。ここで問題は何ですか？

angularjsangular-ui-router
93
Sefa

この種のエラーは通常、（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>

実行する方法と、後でイオンフレームワークを正しい方法で使用する方法を例にしてください。その例を確認してください ここ

これは、名前付きビューを使った例とよく似たQ&Aです（確実な解決策のために）イオンルーティングの問題、空白ページが表示されます =

タブ内の名前付きビューの改善版はこちら： 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",
  });
66
Radim Köhler

私に何が起こっているのかを共有するためにここに来ただけです。
親を指定する必要はありません。状態は文書指向の方法で機能するため、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"
});

あなたがネスティングの奥深くに行きたいのであれば、警告を編集してください、フルパスは私が指定しなければなりません。たとえば、次のような状態にはできません。

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
})
37
Magus

私はちょうどイオンと同じ問題を抱えています。

それは私のコードに何の問題もなかったことが判明しました、私は単にイオンサーブセッションを終了し、再びイオンサーブを実行しなければなりませんでした。

アプリに戻った後、私の州はうまくいった。

Gulpを実行している場合は、すべての再コンパイルを確実にするために、app.jsファイルの保存を数回押すことをお勧めします。

7
Greg Quinn

イオンルーティングでも同じ問題がありました。

簡単な解決策は州の名前を使うことです - 基本的にstate.go(state name)

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

そしてコントローラでは$state.go('tab.search');を使うことができます

2
Siva Dorai

私はエラーがによってスローされたケースがありました

$state.go('');

これは明らかです。私はこれが将来誰かに役立つことができると思います。

2
P.M

Magusが答えたとおり：

フルパスを指定してください

抽象状態は、すべての子状態のURLにプレフィックスを追加するために使用できます。しかし、abstractは、その子が移入するためのui-viewがまだ必要です。そうするためには、単にそれをインラインで追加することができます。

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

詳細については、ドキュメントを参照してください。 https://github.com/angular-ui/u -router/wiki/Nested-States-%26-Nested-Views

1
cecile