[angularjs] 상태 ”에서 ‘…’을 (를) 확인할 수 없습니다.

Program / 글쓴이

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>

실행하는 방법에 대한 예제 이상을 취하고 나중에 ionic 프레임 워크를 올바른 방법으로 사용하십시오 … 여기에서 해당 예제를 확인 하십시오.

다음은 명명 된 뷰 (더 나은 솔루션을 위해) 이온 라우팅 문제 를 사용하는 예제와 유사한 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",
  });

답변

나에게 일어난 일을 공유하기 위해 여기에 왔습니다.
부모를 지정할 필요가 없으며 상태는 문서 지향 방식으로 작동하므로 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

또는 angular는 패배를 파악할 수 없다는 예외를 던집니다. 이를 해결하기 위해 추상적 인 상태를 정의 할 수 있습니다.

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

답변

Ionic에서 이와 동일한 문제가 발생했습니다.

내 코드에 아무 문제가 없다는 것이 밝혀졌습니다. 간단히 ionic serve 세션을 종료하고 ionic serve를 다시 실행해야했습니다.

앱으로 돌아간 후 내 상태는 잘 작동했습니다.

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에 접두사를 추가 할 수 있습니다. 그러나 abstract는 자식이 . 그렇게하려면 간단히 인라인으로 추가하면됩니다.

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

자세한 내용은 https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views 문서를 참조하십시오.

답변