How to separate the "ion-side-menu-content" and "ion-side-menu" to two diff html file?

ionic-v1
1

Hi All…

Do u guys got any idea to separate the “ion-side-menu-content” and “ion-side-menu” to external html file?

I am developing a ionic app that with a side menu on the left on every pages of the app.

In my index.html.
I use to separate the of each pages.
Do u guys got any idea to separate the to external html file sth like ?

My index.html code as follow:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>

        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="cordova.js"></script>
        <script src="lib/ionic/js/angular/angular-resource.js"></script>
        <script src="js/app.js"></script>

    </head>
    <body ng-app="mainApp" ng-controller="viewsController">
    <ion-pane >
        <ion-side-menus enable-menu-with-back-views="true">
            <!--side menu content-->
            <ion-side-menu-content drag-content="isDragSideMenu">
                <ion-nav-bar class="bar-stable">
                    <ion-nav-buttons side="left">
                        <button menu-toggle="left" ng-show="isShowSideMenuButton"
                                class="button button-icon button-clear ion-navicon">
                        </button>
                    </ion-nav-buttons>
                    <ion-nav-back-button></ion-nav-back-button>
                </ion-nav-bar>
                <ion-nav-view ></ion-nav-view>
            </ion-side-menu-content>

            <!--side menu menu content  How to separate to external html???????-->
            <ion-side-menu side="left">
                <ion-header-bar class="bar-stable">
                    <h1 class="title">Menu</h1>
                </ion-header-bar>
                <ion-content>
                    <ion-list>
                        <ion-item menu-close href="#/home">Home</ion-item>
                        <ion-item menu-close href="#/setting">Setting</ion-item>
                    </ion-list>
                </ion-content>
            </ion-side-menu>
        </ion-side-menus>
    </ion-pane>
</body>
</html>

image
Screen Shot 2015-09-14 at 12.28.55 pm.png809×703 138 KB

2

but the content of the ion-side-menu in a custom ui-view or use ng-include if the content is static.

3

thx. @bengtler
But what is the meaning of “custom ui-view”? Just like the “ion-nav-view” do?

4

right, just put one “ion-nav-view” tag in the ion-side-menu-content and one in the ion-side-menu. Give them a name and controll the content of it with the state configuration. If you have a menu, that appears in many states of your app, create an abstract state and put the template url of the menu in the view definition. All other states should inherit from this state and define the content template url (+controller).

You can find more info about state configurations here

5

please do not ion-nav-views for such things…

ion-nav-views are there to handle page transitions and everything necessary for navigation. if you only want to hang in some content use the angularjs directive ui-view for that
it is working like ion-nav-view, but without the whole additional logics :wink:

6

Well thanks, i didn’t know that. But i think the template in ion-side-menu-content should use the ionic page transitions, so for the ion-side-menu the “ui-view” is the right directive to use and for the ion-side-menu-content it should be “ion-nav-view”, or am i wrong?

7

it should be ui-view. because the content of the sidemenu is only a part of a page and mostly fixed.

you should keep in mind the first child of an ion-nav-view should be an ion-view --> that means this are whole “pages”, content that fills the whole viewport. If you want to split the content of a view in multiple parts --> use ui-view.