Tidak dapat menyelesaikan '…' dari status ''


98

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?


Ini agak konyol, tetapi saya melihat Anda membuat modul 'myApp' dan mencantumkan 'ionic' sebagai dependensi, namun, saya tidak melihat 'ui-router' terdaftar sebagai dependensi. Apakah Anda memasukkannya di tempat lain?
deadbabykitten

3
@deadbabykitten, ionic urus itu.
Rogers Sampaio

1
@RogersSampaio - Saya baru tahu bahwa baru-baru ini, saya tidak pernah menggunakan ionik sebelumnya, tetapi sekarang saya menggunakannya untuk proyek seluler. Ini sangat luar biasa.
deadbabykitten

Jawaban:


69

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

Rute saya terlihat baik, saya memeriksa contoh ionik lainnya dan kode saya terlihat sama. Saya memasukkan beberapa debugger, console.log, dan peringatan ke dalam fungsi konfigurasi itu dan tidak ada yang dijalankan. Bagaimana cara memastikan bahwa rute saya dimuat? bisakah saya melihatnya?
Sefa

4
Jika saya penasaran untuk melihat status apa yang terdaftar, saya biasanya akan memasukkan $ state info ke metode .run (). Kemudian Anda bisa melakukan console.log ($ States.get ()) yang akan mengembalikan array status. .run ($state) { console.log($states.get()); });
deadbabykitten

37

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

9
Terima kasih 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, itulah masalah saya.
Maks

Saya memiliki masalah yang sama seperti di atas, tetapi juga ingin memasukkan sesuatu di jalur nama negara bagian saya yang tidak akan tercermin dalam jalur rute, sehingga Anda dapat mengecualikan urlproperti keadaan tengah, dan kemudian rute berikut urlakan ditambahkan ke url rute sebelumnya.
Nick M

7

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.


1
Dalam kasus saya, memulai ulang server tidak menyelesaikan masalah tetapi membantu saya memiliki kesalahan yang lebih baik untuk di-debug. Terima kasih!
Magus

3

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


2

Saya punya kasus di mana kesalahan dilemparkan oleh

$state.go('');

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


1

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.