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


98

これは私が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>

しかし、私は得ています

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

例外。ここの問題は何ですか?


これはばかげていますが、「myApp」モジュールを作成していて、依存関係として「ionic」が表示されていますが、「ui-router」が依存関係として表示されていません。別の場所に含めていますか?
deadbabykitten、2015年

3
@ deadbabykitten、ionicが処理します。
ロジャースサンパイオ2015

1
@RogersSampaio-私は最近それを見つけました、私は以前にイオンを使用していませんでしたが、現在モバイルプロジェクトで使用しています。それはかなり素晴らしいです。
deadbabykitten 2015

回答:


69

この種のエラーは通常、(JS)コードの一部がロードされなかったことを意味します。中にある状態ui-srefが抜けていること。

実例があります

私はイオンの専門家ではないので、この例はそれが機能することを示しているはずですが、さらにいくつかのトリックを使用しました(タブの親)

これは少し調整された状態の定義です:

.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",
  });

私のルートは大丈夫に見えます、私は他のイオンの例をチェックしました、そして私のコードは同じに見えます。デバッガー、console.log、アラートをその構成関数に入れましたが、どれも実行されませんでした。ルートが読み込まれていることを確認するにはどうすればよいですか?どういうわけかそれらを見ることができますか?
Sefa

4
登録されている状態を知りたい場合は、通常、$ state infoに.run()メソッドを挿入します。次に、状態の配列を返すconsole.log($ states.get())を実行できます。 .run ($state) { console.log($states.get()); });
deadbabykitten

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"
});

編集警告、入れ子を深くしたい場合は、フルパスを指定する必要があります。たとえば、次のような状態にすることはできません

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が追加されます以前のルートURL。
Nick M

7

Ionicでも同じ問題が発生しました。

私のコードには何の問題もないことがわかりました。私は単にionic serveセッションを終了し、もう一度ionic serveを実行する必要がありました。

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

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


1
私の場合、サーバーを再起動しても問題は解決しませんでしたが、デバッグのエラーが改善されました。ありがとう!
Magus、2015年

2

エラーがスローされたケースがありました

$state.go('');

それは明らかです。これは将来誰かを助けることができると思います。


2

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

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

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

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


1

メイガスが答えたように:

フルパスを指定する必要があります

抽象状態を使用して、すべての子状態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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.