Не вдалося вирішити "..." від стану ""

Це перший раз, коли я намагаюся використовувати 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'
  });
})

Як бачите, у мене є два стани. Я намагаюся зареєструвати такий стан:

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

Але я отримую

Не вдалося вирішити "зареєструвати" від стану ""

виняток. У чому тут проблема?

Така помилка зазвичай означає, що деякі частини (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",
  });

Просто прийшов сюди, щоб поділитися тим, що зі мною відбувається.
Вам не потрібно вказувати батьківський, штати працюють у документоорієнтованому вигляді, тому замість того, щоб вказати 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"
});

EDIT Попередження: якщо ви хочете заглибитись в гніздування, я повинен вказати повний шлях. Наприклад, ви не можете мати такий стан

app.cruds.posts.create

не маючи

app
app.cruds
app.cruds.posts

або кутовий закине виняток, кажучи, що він не може з'ясувати маршрут. Для вирішення цього питання можна визначити абстрактні стани

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

Виявляється, з моїм кодом нічого не було, мені просто довелося вийти з сеансу іонного обслуговування та запустити іонне обслуговування ще раз.

Після повернення в додаток, мої штати працювали чудово.

Я б також запропонував кілька разів натиснути кнопку "Зберегти" у вашому файлі app.js, якщо ви запускаєте глоток, щоб переконатися, що все перекомпілюється.

Була така сама проблема з маршрутизацією Ionic.

Просте рішення - використовувати назву держави - в основному state.go(state name)

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

І в контролері ви можете користуватися $state.go('tab.search');

У мене був випадок, коли помилку кинув a

$state.go('');

Що очевидно. Я думаю, це може допомогти комусь у майбутньому.

Як відповів Маг:

Повний шлях повинен мені вказати

Абстрактні стани можна використовувати для додавання префікса до всіх URL-адрес дочірнього стану. Але зауважте, що реферату все ще потрібен інтерфейс для його дітей . Для цього ви можете просто додати його в рядку.

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

Додаткову інформацію див. У документації: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views