Templates within template

ionic-v1
1

Is it possible to use a template inside a template? I keep getting a black screen after loggin in when using templates within templates. I want to display the app without menus on the login screen, but I want to display menus after they log in. Please advise.

     SAMPLE BEFORE LOGIN
    <ion-nav-view name='display'>
        <div>Login Form</div>
    </ion-nav-view>
     SAMPLE AFTER LOGIN
    <ion-nav-view name='display'>
        <div>Left Menu Template</div>
        <ion-nav-view name='content'>
                <div>Page Content</div>
       </ion-nav-view>
    </ion-nav-view>
    .state('login',{
        url: '/login',
        views: {
              'display': {
                   templateUrl: 'templates/testing.html'
              },
             'content': {
                   templateUrl: 'templates/testing2.html'
             }
        }
    })
2

You could use angular’s ng-include https://docs.angularjs.org/api/ng/directive/ngInclude Then set conditions for elements to show based on $scope variables.

A question for you though, why not just take the user to a new screen after they have successfully logged in?

3

if i understand you right you want something like this:

if not can you explain why not? :smiley:

4

The problem boils down to not being able to have 2 ion-nav-views. Using ngInclude causes my application to have to use $window.location.reload() whenever a user logs out because ionic/angular caches the ngInclude view and doesn’t honor the ng-show attribute. I’m trying to use side menus when logged in and not show any title or menus when logged out.

<div ng-show="account == null || account == undefined">
  		<ion-nav-view name="display"></ui-nav-view>
  	</div>
	<ng-include src="'templates/other/menus.html'" ng-show="account != null && account != undefined"></ng-include>

I could take the user to another screen. That’s a good thought. I suppose I could use index.html for the login screen and menus.html for the authenticated users.

5

I should have explained that the menus are side menus. Trying to get side menus to show and hide based on authentication is not easy for me. You’ll likely run into the issue of having 2 ion-nav-view tags. One ion-nav-view tag for the base template and one ion-nav-view tag in your side menu. You can’t have 2 ion-nav-views nested. This is the heart of the problem.

6

you mean something like this:

and you can have ion-nav-views nested you need to use named once.

the first <ion-nav-view></ion-nav-view> is in the body
the next is in the event-menu template <ion-nav-view name="menuContent"></ion-nav-view>
you could even have more but then it starts to get messy :smiley:

i hope this did help if not could you prove more information.

1 Like
7

Perfectly done. I was getting messed up on the nested states. Looks like you can have nested states, just not named nested states? I’ll keep experimenting. Thanks!