angularjs - property - Não foi possível resolver '…' do estado ''



topromise() angular 5 (4)

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

Aqui está o 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, eu tenho dois estados. Estou tentando registrar um estado como este:

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

Mas eu estou recebendo

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

exceção. Qual é o problema aqui?

https://ffff65535.com


Acabei de ter esse mesmo problema com o Ionic.

Acontece que nada estava errado com meu código, eu simplesmente tive que sair da 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.

Eu também sugeriria pressionar Save no seu arquivo app.js algumas vezes, se você estiver executando o gulp, para garantir que tudo seja recompilado.


Esse tipo de erro geralmente significa que alguma parte do código (js) não foi carregada. Que o estado que está dentro do ui-sref está ausente.

Existe um exemplo de trabalho

Como eu não sou especialista em iônicos, esses exemplos devem mostrar que funcionaria, mas usei mais alguns truques (pai para guias)

Este é um pouco ajustado estado 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('/');
}) 

E aqui temos a visualização principal 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, posteriormente, use a estrutura iônica da maneira certa ... Veja esse exemplo aqui

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

A versão aprimorada com visualizações nomeadas na 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>

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

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 interface de usuário para que seus filhos sejam preenchidos . Para fazer isso, você pode simplesmente adicioná-lo inline.

.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


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; portanto, em vez de especificar o pai: app, basta mudar 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 pode 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
})




angular-ui-router