Question

我有一个基本的，有效的例子，我想做什么，但采取这种方法有一个奇怪的限制。在templates/group.html中，似乎无法在ion-nav-view之上或之下添加内容。

  $stateProvider.state({
    name: 'home',
    url: '/',
    templateUrl: 'templates/home.html'
  });
  $stateProvider.state({
    name: 'group',
    url: '/group',
    templateUrl: 'templates/group.html',
    abstract: true
  });
  $stateProvider.state({
    name: 'group.home',
    url: '/',
    templateUrl: 'templates/group-home.html'
  });
  $stateProvider.state({
    name: 'group.post',
    url: '/post/:id',
    templateUrl: 'templates/group-post.html'
  });

    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>

    <script id="templates/home.html" type="text/ng-template">
      <ion-view view-title="Home">
        <ion-content>
          <p>This is home.</p>
          <a ui-sref="group.home">Go to a group.</a>
        </ion-content>
      </ion-view>
    </script>

    <script id="templates/group.html" type="text/ng-template">
      <ion-view view-title="Group">
        <ion-nav-view></ion-nav-view>
      </ion-view>
    </script>

    <script id="templates/group-home.html" type="text/ng-template">
      <ion-view view-title="Group Home">
        <ion-content>
          <p>This is the group home.</p>
          <a ui-sref="group.post({id: 4})">Go to group post.</a>
        </ion-content>
      </ion-view>
    </script>

    <script id="templates/group-post.html" type="text/ng-template">
      <ion-view view-title="Group Post">
        <ion-content>
          <p>This is a group post.</p>
        </ion-content>
      </ion-view>
    </script>

如何获得此行为，还可以在group.html中添加一些内容？

例如：

    <script id="templates/group.html" type="text/ng-template">
      <ion-view view-title="Group">
        <p>Some stuff here.</p>
        <ion-nav-view></ion-nav-view> <!-- group child view stuff here -->
        <p>Stuff here, too, if possible.</p>
      </ion-view>
    </script>

我可以看到为什么嵌套的ion-nav-view无法解决，因为它有一个全屏类型的容器，但是为ui-view更改它会破坏父离子导航视图。过渡和离子导航杆停止工作。似乎父母ion-nav-view不应该介意有孩子ui-view。也许离子这种用户界面是不可能的？

Answer 1

我遇到了同样的问题。猜它不像ion-nav-view里面的ion-content。有几种可能的解决方法。我倾向于根据需要嵌套尽可能多的ion-nav-view，然后在层次结构中只使用ion-content一次。如果我需要在其中进一步嵌套，只需使用ng-view。

例如，您的观点可能如下所示。

<!-- root view -->
<body>
    <ion-nav-view></ion-nav-view>
</body>

<!-- some example abstract page -->
<ion-view>
    <div class="bar bar-header bar-positive">
        <h1 class="title">Some name</h1>
    </div>

    <!-- notice class="has-header" which would normally be appended to <ion-content> -->
    <ion-nav-view class="has-header"></ion-nav-view> 
</ion-view>

<!-- example content of example abstract page-->
<ion-view>
    <ion-content>
        <p>{{someproperty}}</p>
        <div ng-view></div>
    </ion-content>
</ion-view>

请注意，ion-content用于滚动。它的大小适合其父母。

到目前为止，我只是不知道有时使用ng-view代替ion-nav-view会产生什么副作用。请告诉我您使用该解决方法的经验。

在内容中嵌套ion-nav-view

1 个答案: