Tidak dapat menyelesaikan '…' dari status ''

Ini pertama kalinya saya mencoba menggunakan ui-router.

Ini adalah app.js saya

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

Seperti yang Anda lihat, saya punya dua negara bagian. Saya mencoba mendaftar negara bagian seperti ini:

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

Tapi saya mendapatkan

Tidak dapat menyelesaikan 'daftar' dari negara bagian ''

pengecualian. Apa masalah yang terjadi di sini?

Jenis kesalahan ini biasanya berarti bahwa beberapa bagian kode (JS) tidak dimuat. Bahwa negara bagian yang ada di dalamnya ui-srefhilang.

Ada contoh kerja

Saya bukan ahli ionik, jadi contoh ini harus menunjukkan bahwa ini akan berfungsi, tetapi saya menggunakan beberapa trik lagi (induk untuk tab)

Ini adalah def negara yang sedikit disesuaikan:

.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('/');
}) 

Dan di sini kita memiliki tampilan induk dengan tab, dan isinya:

<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>

Ambil lebih dari satu contoh bagaimana membuatnya berjalan dan kemudian menggunakan kerangka ionik dengan cara yang benar ... Periksa contoh itu di sini

Berikut adalah Q & A serupa dengan contoh menggunakan masalah perutean ionik tampilan bernama (untuk solusi yang lebih baik pasti) , menunjukkan halaman kosong

Versi yang lebih baik dengan tampilan bernama di tab ada di sini: 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>

menargetkan tampilan bernama:

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

Datang saja ke sini untuk berbagi apa yang terjadi pada saya.
Anda tidak perlu menentukan induknya, status bekerja dengan cara yang berorientasi dokumen jadi, alih-alih menentukan induk: app, Anda cukup mengubah status ke 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 Peringatan, jika Anda ingin masuk lebih dalam, jalur lengkap harus saya tentukan. Misalnya, Anda tidak boleh berstatus suka

app.cruds.posts.create

tanpa memiliki

app
app.cruds
app.cruds.posts

atau angular akan mengeluarkan pengecualian yang mengatakan tidak bisa mengetahui kekalahannya. Untuk mengatasinya, Anda dapat menentukan status abstrak

.state('app', {
     url: "/app",
     abstract: true
})
.state('app.cruds', {
     url: "/app/cruds",
     abstract: true
})
.state('app/cruds/posts', {
     url: "/app/cruds/posts",
     abstract: true
})

Saya baru saja mengalami masalah yang sama dengan Ionic.

Ternyata tidak ada yang salah dengan kode saya, saya hanya perlu keluar dari sesi servis ionik dan menjalankan servis ionik lagi.

Setelah kembali ke aplikasi, status saya berfungsi dengan baik.

Saya juga menyarankan untuk menekan simpan pada file app.js Anda beberapa kali jika Anda menjalankan gulp, untuk memastikan semuanya dikompilasi ulang.

Memiliki masalah yang sama dengan perutean ionik.

Solusi sederhana adalah dengan menggunakan nama negara - pada dasarnya state.go(state name)

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

Dan di pengontrol Anda dapat menggunakan $state.go('tab.search');

Saya punya kasus di mana kesalahan dilemparkan oleh

$state.go('');

Yang jelas. Saya rasa ini bisa membantu seseorang di masa depan.

Seperti yang dijawab oleh Magus:

jalur lengkap harus saya tentukan

Status abstrak dapat digunakan untuk menambahkan awalan ke semua url status anak. Tetapi perhatikan bahwa abstrak masih membutuhkan tampilan ui untuk diisi oleh anaknya . Untuk melakukannya, Anda cukup menambahkannya sebaris.

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

Untuk informasi lebih lanjut lihat dokumentasi: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views