angular-ui-router嵌套視圖和「RangeError：超出最大調用堆棧大小」

我正在使用IonicFramework的最新版本，它使用引擎蓋下的angular-ui-router 0.2.8。這是我第一次使用ui-router，所以我可能犯了一個愚蠢的錯誤，但我無法弄清楚它是什麼。當我導航到剛添加的新狀態/視圖集時，出現「超出最大調用堆棧大小」錯誤，Chrome選項卡崩潰。angular-ui-router嵌套視圖和「RangeError：超出最大調用堆棧大小」

我的基本HTML是非常簡單的：

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

這裏是相關畫面的路由配置：

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指令中的一個bug。自從我們在下一個版本發佈的夜間版本中修復了這個問題後，

要指出的一件事是eventmenu狀態有abstract: true，因爲側面菜單本身並不是它自己的視圖，而是一個視圖的容器。

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.

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

下面是使用抽象狀態用於側菜單的一個例子。

$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>。請注意，Ionic使用<nav-view>而不是Angular UI Router的<ui-view>，因爲Ionic的navView指令帶有內置的導航和動畫系統。

接下來，event-menu.html（這是一個抽象的狀態），有一個名爲menuContent的子navView指令，這是所有其他狀態將其視圖插入的位置。

<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這裏： http://codepen.io/ionic/pen/EtbrF

另外，在寫這個codepen使用每晚構建，因爲一些爲您的演示要求在一份新聞稿中還沒有時間。

希望有幫助！

來源

2014-01-23 17:53:06 adam

我把側邊菜單放在視圖中，因爲我不希望它在所有視圖上都可用;特別是在auth視圖上。有沒有辦法禁用每個視圖？ –

那麼這是否意味着我的問題源於在視圖內使用側菜單？它是僅限於根的組件嗎？ –

angular-ui-router嵌套視圖和「RangeError：超出最大調用堆棧大小」

回答

相關問題