Não foi possível resolver '...' do estado ''


98

Esta é a primeira vez que tento usar o ui-router.

Aqui está meu 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'
  });
})

Como você pode ver, tenho dois estados. Estou tentando registrar um estado assim:

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

Mas estou conseguindo

Não foi possível resolver o 'registro' do estado ''

exceção. Qual é o problema aqui?


Isso é meio bobo, mas vejo que você está criando o módulo 'myApp' e está listando 'ionic' como uma dependência, no entanto, não vejo 'ui-router' listado como uma dependência. Você está incluindo em outro lugar?
deadbabykitten

3
@deadbabykitten, a ionic cuida disso.
Rogers Sampaio

1
@RogersSampaio - Acabei de descobrir isso recentemente, não tinha usado o iônico antes, mas estou usando para um projeto móvel agora. É incrível.
deadbabykitten

Respostas:


69

Esse tipo de erro geralmente significa que algumas partes do código (JS) não foram carregadas. Que o estado de dentro ui-srefestá faltando.

um exemplo de trabalho

Não sou um especialista em iônica, então este exemplo deve mostrar que funcionaria, mas usei mais alguns truques (pai para guias)

Esta é uma definição de estado um pouco ajustada:

.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('/');
}) 

E aqui temos a visualização pai com guias e seu conteúdo:

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

Pegue mais do que um exemplo de como fazê-lo funcionar e depois usar a estrutura iônica da maneira certa ... Veja esse exemplo aqui

Aqui está uma pergunta e resposta semelhante com um exemplo usando o problema de roteamento iônico de visualizações nomeadas (com certeza uma solução melhor) , mostra a página em branco

A versão aprimorada com visualizações nomeadas em uma guia está aqui: 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>

segmentação de visualizações nomeadas:

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

Minhas rotas parecem ok, eu verifiquei outros exemplos iônicos e meu código parece o mesmo. Coloquei algum depurador, console.log e alerta nessa função de configuração e nenhum deles foi executado. Como posso ter certeza de que minhas rotas estão carregadas? posso vê-los de alguma forma?
Sefa

4
Se estou curioso para ver quais estados estão registrados, normalmente injetarei $ state info no método .run (). Então você pode fazer console.log ($ states.get ()) que retornará um array de estados. .run ($state) { console.log($states.get()); });
gatinho morto

37

Só vim aqui para compartilhar o que estava acontecendo comigo.
Você não precisa especificar o pai, os estados funcionam de maneira orientada a documentos, então, em vez de especificar pai: app, você pode apenas alterar o estado para 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 Atenção, se você quiser se aprofundar no aninhamento, o caminho completo deve ser especificado. Por exemplo, você não pode ter um estado como

app.cruds.posts.create

sem ter um

app
app.cruds
app.cruds.posts

ou angular lançará uma exceção dizendo que não consegue descobrir a rota. Para resolver isso, você pode definir estados abstratos

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

9
Obrigado por 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 like, esse era o meu problema.
Máx.

Eu tive o mesmo problema acima, mas também queria incluir algo no caminho do meu nome de estado que não seria refletido no caminho da rota, então você pode excluir a urlpropriedade do estado do meio, e então a rota a seguir urlserá anexada a o URL do trajeto anterior.
Nick M

7

Acabei de ter o mesmo problema com o Ionic.

Acontece que não havia nada de errado com meu código, simplesmente tive que encerrar a sessão de serviço iônico e executar o serviço iônico novamente.

Depois de voltar para o aplicativo, meus estados funcionaram bem.

Também sugiro pressionar salvar no arquivo app.js algumas vezes se estiver executando o gulp, para garantir que tudo seja recompilado.


1
No meu caso, reiniciar o servidor não resolveu o problema, mas me ajudou a ter um erro melhor para depurar. Obrigado!
Magus

3

Tive o mesmo problema com o roteamento Ionic.

Uma solução simples é usar o nome do estado - basicamente state.go(state name)

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

E no controlador você pode usar $state.go('tab.search');


2

Tive um caso em que o erro foi lançado por um

$state.go('');

O que é óbvio. Acho que isso pode ajudar alguém no futuro.


1

Como respondido por Magus:

o caminho completo deve ser especificado

Os estados abstratos podem ser usados ​​para adicionar um prefixo a todos os urls de estado filho. Mas observe que o abstrato ainda precisa de uma visão-ui para que seus filhos sejam preenchidos . Para fazer isso, você pode simplesmente adicioná-lo embutido.

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

Para obter mais informações, consulte a documentação: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.