Не удалось разрешить "..." из состояния '

Это первый раз, когда я пытаюсь использовать 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'
  });
})

Как вы можете видеть, у меня два состояния. Я пытаюсь зарегистрировать состояние следующим образом:

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

Но я получаю

Не удалось разрешить "регистр" из состояния "

исключение. В чем проблема?

Ответ 1

Эта ошибка обычно означает, что некоторая часть кода (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",
  });

Ответ 2

Просто пришел сюда, чтобы рассказать, что со мной происходит.
Вам не нужно указывать родительский элемент, работающие в документе ориентированы так, чтобы вместо указания родителя: 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"
});

ИЗМЕНИТЬ Предупреждение. Если вы хотите углубляться в гнездование, я должен указать полный путь. Например, у вас не может быть состояния типа

app.cruds.posts.create

не имея

app
app.cruds
app.cruds.posts

или angular выдаст исключение, говоря, что он не может определить маршрут. Чтобы решить это, вы можете определить абстрактные состояния

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

Ответ 3

У меня была такая же проблема с Ionic.

Оказалось, что с моим кодом ничего не случилось, мне просто пришлось выйти из сеанса ионной подачи и снова запустить ионную подачу.

После возвращения в приложение мои состояния работали нормально.

Я бы также предложил несколько раз сохранить файл app.js, если вы используете gulp, чтобы все было перекомпилировано.

Ответ 4

У меня был случай, когда ошибка была сброшена с помощью

$state.go('');

Это очевидно. Думаю, это может помочь кому-то в будущем.

Ответ 5

Имел ту же проблему с ионной маршрутизацией.

Простым решением является использование имени состояния - в основном state.go(state name)

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

И в контроллере вы можете использовать $state.go('tab.search');

Ответ 6

Как ответил Магус:

полный путь должен быть указан мной

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

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

Для получения дополнительной информации см. Документацию: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views