Nie można rozpoznać „…” ze stanu „”

Po raz pierwszy próbuję użyć routera ui.

Oto moja aplikacja.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'
  });
})

Jak widać, mam dwa stany. Próbuję zarejestrować stan w następujący sposób:

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

Ale dostaję

Nie można rozpoznać słowa „rejestracja” ze stanu „”

wyjątek. Jaki jest tutaj problem?

Ten rodzaj błędu zwykle oznacza, że ​​niektóre części kodu (JS) nie zostały załadowane. ui-srefBrakuje stanu, w którym się znajduje .

Jest przykładem pracy

Nie jestem ekspertem w dziedzinie jonizacji, więc ten przykład powinien pokazać, że to by działało, ale użyłem więcej trików (rodzic dla kart)

To jest nieco wyregulowany stan 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('/');
}) 

A tutaj mamy widok nadrzędny z zakładkami i ich zawartością:

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

Weź go ponad przykład jak zrobić to działa i później wykorzystywać jonowych ramowa właściwą drogę ... Sprawdź, czy przykład tutaj

Oto podobne pytania i odpowiedzi z przykładem wykorzystującym nazwane widoki (na pewno lepsze rozwiązanie) problem z routingiem jonowym, pokazuje pustą stronę

Ulepszona wersja z nazwanymi widokami na karcie jest tutaj: 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>

kierowanie na nazwane widoki:

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

Przyszedłem tutaj, aby podzielić się tym, co się ze mną dzieje.
Nie musisz określać rodzica, stany działają w sposób zorientowany na dokument, więc zamiast określać parent: app, możesz po prostu zmienić stan na 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"
});

EDYTUJ Ostrzeżenie, jeśli chcesz zagłębić się w zagnieżdżenie, musisz określić pełną ścieżkę. Na przykład nie możesz mieć stanu takiego jak

app.cruds.posts.create

bez pliku

app
app.cruds
app.cruds.posts

lub angular zgłosi wyjątek z informacją, że nie może znaleźć trasy. Aby rozwiązać ten problem, możesz zdefiniować stany abstrakcyjne

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

Właśnie miałem ten sam problem z Ionic.

Okazuje się, że nie było nic złego w moim kodzie, po prostu musiałem opuścić sesję serwisu jonowego i ponownie uruchomić obsługę jonową.

Po powrocie do aplikacji moje stany działały dobrze.

Sugerowałbym również kilkakrotne naciśnięcie przycisku Zapisz w pliku app.js, jeśli używasz gulp, aby upewnić się, że wszystko zostanie ponownie skompilowane.

Miał ten sam problem z routingiem Ionic.

Prostym rozwiązaniem jest użycie nazwy państwa - w zasadzie state.go(state name)

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

A w kontrolerze możesz użyć $state.go('tab.search');

Miałem przypadek, w którym błąd został zgłoszony przez

$state.go('');

Co jest oczywiste. Myślę, że to może komuś pomóc w przyszłości.

Jak odpowiedział Magus:

należy podać pełną ścieżkę

Stany abstrakcyjne mogą służyć do dodawania przedrostków do wszystkich adresów URL stanów podrzędnych. Należy jednak pamiętać, że streszczenie nadal potrzebuje widoku interfejsu użytkownika, aby jego dzieci mogły się zapełnić . Aby to zrobić, możesz po prostu dodać go w tekście.

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

Więcej informacji można znaleźć w dokumentacji: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views