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：超出最大调用堆栈大小”

回答

相关问题