angularjs – angular-ui-router嵌套视图和“RangeError：超出最

发布时间：2020-12-17 07:25:14 所属栏目：安全来源：网络整理

导读：我正在使用最新版本的 IonicFramework,它使用了引擎盖下的angular-ui-router 0.2.8.这是我第一次使用ui-router所以我可能犯了一个愚蠢的错误,但我无法弄清楚它是什么.当我导航到我刚添加的新状态/视图集时,出现“超出最大调用堆栈大

我正在使用最新版本的 IonicFramework,它使用了引擎盖下的angular-ui-router 0.2.8.这是我第一次使用ui-router所以我可能犯了一个愚蠢的错误,但我无法弄清楚它是什么.当我导航到我刚添加的新状态/视图集时,出现“超出最大调用堆栈大小”错误,Chrome选项卡崩溃.

我的基本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>

除了调用堆栈无限递归,我在控制台中没有得到任何其他错误.知道我做错了什么吗？

您的示例帮助指出了navView指令中的错误.我已经把修复程序放在了我们下一个版本中的每晚版本中.

有一点需要指出的是,eventmenu状态有abstract：true,因为side菜单本身不是它自己的视图,而是视图的容器.

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',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路由器的< 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>

我在这里整理了一个快速的代码：
http://codepen.io/ionic/pen/EtbrF

此外,在编写本文时,codepen使用每晚构建,因为您的演示的某些要求尚未发布.

希望有所帮助！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!