1. ホーム
  2. angularjs

[解決済み] 状態から '...' を解決できませんでした。

2022-12-01 11:58:11

質問

初めて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'
  });
})

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

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

しかし、私は

ステート '' から 'register' を解決できませんでした。

例外が発生しました。ここで何が問題なのでしょうか?

どのように解決するのですか?

この種のエラーは、通常、(JS)コードの一部が読み込まれていないことを意味します。の中にある状態が読み込まれなかったということです。 ui-sref の中にある状態が欠落していることを意味します。

あるのは 動作例

私はionicの専門家ではないので、この例はそれが動作していることを示すはずですが、私はいくつかのより多くのトリック(タブのための親)を使用しました。

これは、少し調整した状態のデフです。

.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フレームワークを使用することを取る...その例をチェックしてください。 ここで

以下は、同様のQ&Aで、名前付きビューを使用した例です。 (を使用した例です(確かにより良い解決策です)。 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",
  });