programing

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

yellowcard 2023. 3. 6. 20:57
반응형

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

저는 UI 라우터를 처음 사용해 봅니다.

여기 제 앱이 있습니다.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>

하지만 나는 점점

상태 ''의 'register'를 확인할 수 없습니다.

예외.여기 뭐가 문제죠?

이러한 에러는, 통상, 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>

실행시키고 나중에 이온 프레임워크를 올바른 방법으로 사용하는 방법의 예에 그치지 않습니다.여기서 예를 확인해 주세요.

다음으로 명명된 뷰(확실히나은 솔루션) 이온 라우팅 문제를 사용한 예시와 같은 Q&A를 나타냅니다.빈 페이지가 표시됩니다.

탭에 명명된 뷰가 포함된 향상된 버전은 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>

명명된 뷰를 대상으로 지정:

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

나한테 무슨 일이 일어났는지 알려주러 온 것뿐이야
상위를 지정할 필요는 없습니다.상태는 문서 지향적으로 동작하기 때문에 상위를 지정하는 대신 상위를 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"
});

편집 경고, 중첩 깊숙이 들어가려면 전체 경로를 지정해야 합니다.예를 들어, 다음과 같은 상태를 가질 수 없습니다.

app.cruds.posts.create

을 가지지 않고

app
app.cruds
app.cruds.posts

아니면 앵글이 루트를 알 수 없다며 예외를 던집니다.추상 상태를 정의할 수 있는 문제를 해결하려면

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

방금 이온과 같은 문제가 있었어

내 코드에 아무 문제가 없었음이 판명되었습니다. 단지 이온 서비스 세션을 종료하고 다시 이온 서비스를 실행해야 했습니다.

다시 앱으로 들어가니 상태가 정상으로 돌아갔습니다.

또한 모든 것을 다시 컴파일하기 위해 gulp이 실행 중인 경우 app.js 파일의 저장을 여러 번 누르는 것이 좋습니다.

Ionic 라우팅에서도 같은 문제가 발생.

간단한 해결책은 주(州)의 이름을 사용하는 것입니다.기본적으로state.go(state name)

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

컨트롤러에서는$state.go('tab.search');

에러가 발생한 적이 있습니다.

$state.go('');

그건 명백하다.이것이 미래에 누군가를 도울 수 있을 것 같아.

Magus의 답변:

전체 경로를 지정해야 합니다.

추상 상태를 사용하여 모든 자식 상태 URL에 접두사를 추가할 수 있습니다.그러나 추상에는 여전히 하위 항목을 채울 UI 보기가 필요합니다.이렇게 하려면 단순히 인라인으로 추가합니다.

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

상세한 것에 대하여는, 다음의 문서를 참조해 주세요.https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

언급URL : https://stackoverflow.com/questions/28265230/could-not-resolve-from-state

반응형