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

98

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?

Sefa
źródło
To trochę głupie, ale widzę, że tworzysz moduł „myApp” i wymieniasz „ionic” jako zależność, jednak nie widzę „ui-router” na liście zależności. Czy umieszczasz to gdzie indziej?
deadbabykitten
3
@deadbabykitten, ionic się tym zajmuje.
Rogers Sampaio
1
@RogersSampaio - niedawno się o tym dowiedziałem, nie korzystałem wcześniej z ionic, ale teraz używam go w projekcie mobilnym. To niesamowite.
deadbabykitten

Odpowiedzi:

69

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",
  });
Radim Köhler
źródło
Moje trasy wyglądają dobrze, sprawdziłem inne przykłady jonowe i mój kod wygląda tak samo. Włożyłem debugger, console.log i alert do tej funkcji konfiguracyjnej i żaden z nich nie został wykonany. Jak mogę się upewnić, że moje trasy są załadowane? czy mogę je jakoś zobaczyć?
Sefa
4
Jeśli jestem ciekawy, jakie stany są zarejestrowane, zazwyczaj wstrzyknę $ state info metodą .run (). Następnie możesz zrobić console.log ($ states.get ()), co zwróci tablicę stanów. .run ($state) { console.log($states.get()); });
deadbabykitten
37

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
})
Mag
źródło
9
Dzięki za 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 liketo był mój problem.
Max
Miałem ten sam problem co powyżej, ale chciałem też zawrzeć coś w mojej ścieżce nazwy stanu, co nie będzie odzwierciedlone w ścieżce trasy, więc możesz wykluczyć urlwłaściwość stanu średniego, a wtedy następująca trasa urlzostanie dołączona do poprzedni adres URL trasy.
Nick M
7

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.

Greg Quinn
źródło
1
W moim przypadku ponowne uruchomienie serwera nie rozwiązało problemu, ale pomogło mi uzyskać lepszy błąd do debugowania. Dzięki!
Magus
3

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

Siva Dorai
źródło
2

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.

PO POŁUDNIU
źródło
1

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

cecile
źródło