각도 ui 라우터 중첩 된보기 및 "RangeError : 최대 호출 스택 크기가 초과되었습니다"

후드 아래 각도 -ui-router 0.2.8을 사용하는 IonicFramework의 최신 버전을 사용하고 있습니다. 이것은 ui-router를 처음 사용하기 때문에 아마도 어리석은 실수를 저지르고 있을지 모르지만 그게 뭔지 알 수는 없습니다. 방금 추가 한 새로운 상태/뷰 집합으로 이동하면 '최대 호출 스택 크기 초과'오류가 발생하고 Chrome 탭이 다운됩니다.각도 ui 라우터 중첩 된보기 및 "RangeError : 최대 호출 스택 크기가 초과되었습니다"

<body ng-app="checkinApp" ng-controller="GlobalCtrl"> 
    <nav-view></nav-view> 
</body>

그리고 여기에 관련 화면에 대한 경로 설정입니다 :

내 기본 HTML은 매우 간단 간단하게 위의 경로 구성을 사용하여 응용 프로그램을 시작

app.config(function($stateProvider, $urlRouterProvider) { 

    $stateProvider 
    .state('event', { 
     url: "/event" 
     ,templateUrl: "templates/event.html" 
     ,controller: "MainCtrl" 
    }) 
    .state('event.chooseEvent', { 
     url: "/choose" 
     ,templateUrl: "templates/chooseEvent.html" 
     ,controller: "MainCtrl" 
    }) 
    .state('event.eventCheckin', { 
     url: "/checkin" 
     ,templateUrl: "templates/eventCheckin.html" 
     ,controller: "MainCtrl" 
    }); 

    // if none of the above are matched, go to this one 
    $urlRouterProvider.otherwise("/event/choose"); 
});

없이, 오류를 발생 다른 상호 작용이 필요합니다. 여기

은 ... 내 도면이다

event.html :

주 내가 렌더링하는 아이 뷰를 기대하고있어 <nav-view></nav-view> 블록.

<side-menus> 

    <!-- page content --> 
    <pane side-menu-content> 
     <header class="bar bar-header bar-positive"> 
      <button class="button button-icon icon ion-navicon" ng-click="toggleMenu()"></button> 
      <h1 class="title">Checkin</h1> 
     </header> 

     <nav-view></nav-view> 

    </pane> 

    <side-menu side="left"> 
     <content>navigation menu content here</content> 
    </side-menu> 

</side-menus>

eventCheckin.html :

<content has-header="true" on-refresh="refreshAttendees()"> 

    <!-- for pull to refresh --> 
    <refresher></refresher> 

    <ul class="list"> 
     <li 
      ng-repeat="person in attendees | orderBy:'firstname' | orderBy:'lastname'" 
      item="person" 
      class="item item-toggle" 
      > 
       {{person.lastname}}, {{person.firstname}} 
       <label class="toggle"> 
        <input type="checkbox" ng-checked="person.arrived" ng-click="toggleArrived(person)" /> 
        <div class="track"> 
         <div class="handle"></div> 
        </div> 
       </label> 
     </li> 
    </ul> 

</content>

chooseEvent.html : 호출 스택 무한 재귀에서 제외

<div><br/><br/><br/>Swipe right to choose an Event</div>

, 나는 다른 어떤 오류를받지 못했습니다 콘솔. 내가 뭘 잘못하고 있는거야?

출처

2014-01-23 Adam Tuttle

귀하의 예는 navView 지시문에 버그를 지적하는 데 도움이되었습니다. 이후로 다음 릴리스에 적용될 야간 빌드에 수정 사항을 넣었습니다.

한 가지 지적해야 할 점은 eventmenu 상태는 abstract: true입니다. 사이드 메뉴 자체는보기가 아니라보기 대신 컨테이너이기 때문입니다. 이하

https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#wiki-abstract-states

An abstract state can have child states but can not get activated itself. An 'abstract' state is simply a state that can't be transitioned to. It is activated implicitly when one of its descendants are activated.

는 사이드 메뉴 추상적 인 상태를 사용한 예이다. 마크 업에 대한

$stateProvider 
     .state('eventmenu', { 
     url: "/event", 
     abstract: true, 
     templateUrl: "event-menu.html" 
     }) 
     .state('eventmenu.home', { 
     url: "/home", 
     views: { 
      'menuContent' :{ 
      templateUrl: "home.html" 
      } 
     } 
     }) 
     .state('eventmenu.checkin', { 
     url: "/check-in", 
     views: { 
      'menuContent' :{ 
      templateUrl: "check-in.html", 
      controller: "CheckinCtrl" 
      } 
     } 
     }) 
     .state('eventmenu.attendees', { 
     url: "/attendees", 
     views: { 
      'menuContent' :{ 
      templateUrl: "attendees.html", 
      controller: "AttendeesCtrl" 
      } 
     } 
     })

메인 <nav-view>은 신체의 루트에, 그리고 <nav-bar>는 <pane side-menu-content>에 있습니다. Angonic UI Router의 <ui-view> 대신에 Ionic의 navView 지시문에는 내비게이션 및 애니메이션 시스템이 내장되어 있기 때문에 Ionic은 을 사용합니다.

다음으로 (추상적 인 상태 인) event-menu.html에는 menuContent이라는 자식 navView 지시문이 있습니다.이 지시어는 다른 모든 상태에서 해당 뷰를 연결합니다.데모에 대한 요구 사항 중 일부는 아직 릴리스에없는 때문에 codepen가 야간 빌드를 사용하여이 글을 쓰는 시점에서, 또한 http://codepen.io/ionic/pen/EtbrF

<div ng-controller="MainCtrl">  
    <nav-view></nav-view> 
</div> 

<script id="event-menu.html" type="text/ng-template"> 
    <side-menus> 

    <pane side-menu-content> 
     <nav-bar type="bar-positive" 
       back-button-type="button-icon" 
       back-button-icon="ion-ios7-arrow-back"></nav-bar> 
     <nav-view name="menuContent"></nav-view> 
    </pane> 

    <side-menu side="left"> 
     <header class="bar bar-header bar-assertive"> 
     <div class="title">Left Menu</div> 
     </header> 
     <content has-header="true"> 
     <ul class="list"> 
      <a href="#/event/check-in" class="item">Check-in</a> 
      <a href="#/event/attendees" class="item">Attendees</a> 
     </ul> 
     </content> 
    </side-menu> 

    </side-menus> 
</script>

내가 함께 여기에 빠른 codepen을 넣어.

희망 하시겠습니까?

출처

2014-01-23 17:53:06 adam

모든보기에서 사용할 수 없기 때문에 사이드 메뉴를보기 안에 넣습니다. 특히 인증보기에서 보기 당 사용 중지하는 방법이 있습니까? –

그래서 내 문제는 뷰 내부에서 사이드 메뉴를 사용하는 데서 비롯되는 것입니까? 그것은 루트 전용 구성 요소입니까? –

각도 ui 라우터 중첩 된보기 및 "RangeError : 최대 호출 스택 크기가 초과되었습니다"

답변

관련 문제