Nesting ion-nav-view within content

Question

I have a basic, working example of what I want to do, but taking this approach comes with a strange limitation. In templates/group.html, there doesn't appear to be any way to add content above or below the ion-nav-view.

Click here for live demo.

  $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>

How can I get this behavior, but also add some content within group.html?

For example:

    <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>

I can see why the nested ion-nav-view doesn't work out because it has a full screen kind of container going on, but changing it out for a ui-view breaks the parent ion-nav-view... the transitions and ion-nav-bar stop working. It seems like the parent ion-nav-view shouldn't mind there being a child ui-view. Perhaps this kind of UI just isn't possible with ionic?

Unless a solution is presented, the only thing I can think to do is to make the content that should be above or below the nested view into directives and include the directive elements on each nested view. Not as DRY, but it works. — m59

LuckyLikey LuckyLikey · Accepted Answer · 2016-01-14T13:20:09

i've got the same problem. guess it doesn't like ion-nav-view inside of ion-content. there are several possible workarounds. I tend to nest as many ion-nav-views as needed and then only using ion-content once in the hierarchy. If I need further nesting inside that one im simply using ng-view.

For example your views may look like this.

<!-- 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>

Note that ion-content is used for scrolling. It's sized up to its parent.

so far I only dont know what side effect's it will have that sometimes ng-view is used instead of ion-nav-view. So tell me your experience with that workaround.

Nesting ion-nav-view within content

1 Answers