8

内部で angular-ui-router 0.2.8 を使用する最新バージョンのIonicFrameworkを使用しています。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>

コール スタックの無限再帰を除けば、コンソールに他のエラーは表示されません。私が間違っていることは何か分かりますか？

4

1 に答える 1

6

あなたの例は、 navView ディレクティブ内のバグを特定するのに役立ちました。それ以来、次のリリースで使用されるナイトリー ビルドに修正を加えました。

指摘すべきことの 1 つは、eventmenu状態に がabstract: trueあることです。これは、サイド メニュー自体が独自のビューではなく、ビューのコンテナーであるためです。

抽象状態は子状態を持つことができますが、それ自体をアクティブにすることはできません。「抽象的な」状態は、遷移できない状態です。その子孫の 1 つがアクティブ化されると、暗黙的にアクティブ化されます。

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"
          }
        }
      })

マークアップの場合、 main<nav-view>は本体のルートにあり、<nav-bar>は 内にあります<pane side-menu-content>。Ionic の navView ディレクティブにはナビゲーションおよびアニメーション システムが組み込まれているため、Ionic<nav-view>は Angular UI Router の代わりに を使用することに注意してください。<ui-view>

次に、event-menu.html(抽象状態) には、 という名前の子 navView ディレクティブmenuContentがあり、他のすべての状態がビューをプラグインする場所です。

<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

また、これを書いている時点では、デモの要件の一部がまだリリースされていないため、コードペンはナイトリー ビルドを使用しています。

それが役立つことを願っています!

于 2014-01-23T17:53:06.530 に答える