'...' durumundan '' çözümlenemedi

Bu, ui-yönlendiriciyi ilk kez kullanmaya çalışıyorum.

İşte benim 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'
  });
})

Gördüğünüz gibi iki eyaletim var. Durumu şöyle kaydetmeye çalışıyorum:

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

Ama alıyorum

Durumdan 'kayıt' çözülemedi ''

istisna. Buradaki sorun nedir?

Bu tür bir hata genellikle (JS) kodunun bazı bölümlerinin yüklenmediği anlamına gelir. İçinde olan devletin ui-srefeksik olduğunu.

Orada çalışan bir örnektir

Ben iyonik konusunda uzman değilim, bu yüzden bu örnek bunun işe yarayacağını göstermeli, ancak bazı hileler kullandım (sekmeler için ebeveyn)

Bu biraz ayarlanmış bir durum 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('/');
}) 

Ve burada sekmelerle birlikte ana görünüm ve içerikleri var:

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

Çalışıyorsa nasıl bir örnek daha götürün ve daha sonra iyonik çerçevesinin doğru kullandığınızdan ... bu örnek edin burada

Burada, adlandırılmış görünümleri kullanan bir örnekle benzer Soru-Cevap yer almaktadır (kesinlikle daha iyi bir çözüm için) iyonik yönlendirme sorunu, boş sayfa gösterir

Bir sekmede adlandırılmış görünümlere sahip geliştirilmiş sürüm burada: 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>

adlandırılmış görünümleri hedefleme:

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

Bana neler olduğunu paylaşmak için buraya geldim.
Ebeveyni belirtmenize gerek yoktur, durumlar belge odaklı bir şekilde çalışır, bu nedenle parent: app yerine, durumu app.index olarak değiştirebilirsiniz.

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

DÜZENLE Uyarısı, yuvalama işleminin derinliklerine gitmek istiyorsanız, tam yolu belirlemem gerekir. Örneğin, bir eyalete sahip olamazsınız

app.cruds.posts.create

sahip olmadan

app
app.cruds
app.cruds.posts

veya angular, rotayı çözemediğini söyleyen bir istisna atar. Bunu çözmek için soyut durumları tanımlayabilirsiniz

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

Ionic ile aynı sorunu yaşadım.

Kodumla ilgili bir sorun olmadığı ortaya çıktı, sadece iyonik servis oturumunu bırakıp tekrar iyonik servis çalıştırmam gerekti.

Uygulamaya geri döndükten sonra eyaletlerim iyi çalıştı.

Ayrıca, gulp çalıştırıyorsanız, her şeyin yeniden derlendiğinden emin olmak için app.js dosyanıza birkaç kez kaydetmeyi de öneririm.

İyonik yönlendirme ile aynı sorunu yaşadım.

Basit çözüm, devletin adını kullanmaktır - temelde state.go(state name)

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

Ve denetleyicide kullanabilirsiniz $state.go('tab.search');

Hatanın bir tarafından atıldığı bir durum yaşadım.

$state.go('');

Açık olan. Sanırım bu gelecekte birine yardımcı olabilir.

Magus'un yanıtladığı gibi:

tam yol belirtilmeli

Soyut durumlar, tüm alt durum URL'lerine bir önek eklemek için kullanılabilir. Ancak özetin, çocuklarının doldurulması için hala bir kullanıcı arayüzüne ihtiyaç duyduğunu unutmayın . Bunu yapmak için basitçe satır içi ekleyebilirsiniz.

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

Daha fazla bilgi için belgelere bakın: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views