IT story

상태 ''에서 '…'을 (를) 확인할 수 없습니다.

hot-time 2020. 8. 25. 20:15
반응형

상태 ''에서 '…'을 (를) 확인할 수 없습니다.


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>

하지만 나는 점점

상태 ''에서 '등록'을 해결할 수 없습니다.

예외. 여기서 문제는 무엇입니까?


이러한 종류의 오류는 일반적으로 (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>

Take it more then an example how to make it running and later use ionic framework the right way...Check that example here

Here is similar Q & A with an example using the named views (for sure better solution) ionic routing issue, shows blank page

Improved version with named views in tab is here: 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>

targeting named views:

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

Just came here to share what was happening to me.
You don't need to specify the parent, states work in an document oriented way so, instead of specifying parent: app, you could just change the state to 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 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

app.cruds.posts.create

without having a

app
app.cruds
app.cruds.posts

or angular will throw an exception saying it can't figure out the rout. To solve that you can define abstract states

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

I've just had this same issue with Ionic.

It turns out nothing was wrong with my code, I simply had to quit the ionic serve session and run ionic serve again.

After going back into the app, my states worked fine.

I would also suggest pressing save on your app.js file a few times if you are running gulp, to make sure everything gets re-compiled.


I had a case where the error was thrown by a

$state.go('');

Which is obvious. I guess this can help someone in future.


Had the same issue with Ionic routing.

Simple solution is to use the name of the state - basically state.go(state name)

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

And in controller you can use $state.go('tab.search');


As answered by Magus :

the full path must me specified

Abstract states can be used to add a prefix to all child state urls. But note that abstract still needs a ui-view for its children to populate. To do so you can simply add it inline.

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

For more information see documentation : https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

참고URL : https://stackoverflow.com/questions/28265230/could-not-resolve-from-state

반응형