Sidemenu on the Ionic

Asked

Viewed 607 times

0

I tried to put the SideMenu in the ionic 1, but, did not work. On the main screen was appearing a list and tried to put a SideMenu, but now only the header-bar, follow print : http://imgur.com/a/9kCFe
Could someone help me? Or give some hint of what I did wrong in creating the SideMenu?

Routes.js

angular.module('starter')
.config(function($stateProvider, $urlRouterProvider){

    $urlRouterProvider.otherwise('principal');

    $stateProvider

    .state('app', {
        url: '/app',
        templateUrl : 'templates/menu.html',
        abstract: true
    })

    .state('app.principal', {
        url: '/principal',
        views : {
            'menuContent' : {
                templateUrl: 'templates/principal.html',
                controller: 'PrincipalController'
            }
        }

    })

    .state('app.eventoescolhido', {
        url: '/eventoescolhido/:evento',
        views: {
            'menuContent' : {
                templateUrl: 'templates/eventoescolhido.html',
                controller: 'EventoEscolhidoController'
            }
        }
    })

})

index.html

<!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 rel="manifest" href="manifest.json">

    <!-- un-comment this code to enable service worker
    <script>
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('service-worker.js')
          .then(() => console.log('service worker installed'))
          .catch(err => console.log('Error', err));
      }
    </script>-->

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controller.js"></script>
    <script src="js/routes.js"></script>

  </head>
  <body ng-app="starter">
      <ion-nav-view>
        <ion-nav-bar class="bar bar-assertive">

        </ion-nav-bar>
      </ion-nav-view>
  </body>
</html>

html menu.

<ion-side-menus>
    <ion-side-menu-content>
        <ion-nav-bar> 
            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="center"></button>

            </ion-nav-buttons>
        </ion-nav-bar>

        <ion-nav-view name="menuContent"> </ion-nav-view>

    </ion-side-menu-content>
    <ion-side-menu side="left">
      <ion-content>
       teste
      </ion-content>
    </ion-side-menu>
</ion-side-menus>
  • Vii who has not created any controller for your menu, create, declare in your index and see if it solves.

  • Another thing, in your other. state your app.js has to declare the menu in the views:

  • views: { "side-menu21": { templateUrl: "templates/login/user/profile/enter_profile.html", controller: "login; }

  • @Ramos thanks so much for the help, I did not create controller as I was trying to follow an example of the sidemenu of the own Ionic I am comparing with it to see what I did wrong.

1 answer

0


Try the following:

On the Index between the :

<body ng-app="nhaac" ng-controller="indexCtrl" id="{{ page_id }}">

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

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

A side menu of mine, complete for you to see:

<ion-side-menus enable-menu-with-back-views="false">

    <ion-side-menu-content>


        <ion-nav-bar class="bar-assertive">
            <ion-nav-back-button></ion-nav-back-button>
            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
            </ion-nav-buttons>
        </ion-nav-bar>

        <ion-nav-view name="side-menu21"></ion-nav-view>

    </ion-side-menu-content>

    <ion-side-menu side="left" id="side-menu21" style="background-color:#020202;">

        <ion-content padding="false" style="top:0px !important;background: url(img/fx4pHSlASFOcYgkbKGLE_menu_espero_final.png) no-repeat center;background-size:cover;" class="side-menu-left side-menu-gradient">


            <div class="spacer" style="width: 268px; height: 19px;"></div>



            <ion-list id="vovCooks-list1">

                <ion-item class="item-icon-left  side-menu-item" id="vovCooks-list-item5" ui-sref="nhaac.promocoes" menu-close="">
                    <i class="icon No Icon" ng-show="checarPermissoes('cliente')"></i>INICIO</ion-item>

                <ion-item class="item-icon-left  side-menu-item" id="vovCooks-list-item5" ui-sref="nhaac.tipoUser" menu-close="">
                    <i class="icon No Icon" ng-show="checarPermissoes('cliente')"></i>LOGIN</ion-item>    



<!--                <ion-item class="item-icon-left  side-menu-item"  ui-sref="nhaac.loginnetinho" menu-close="">
                    <i class="icon No Icon"></i>LOGIN NETINHO</ion-item>    

                <ion-item class="item-icon-left  side-menu-item" ui-sref="nhaac.entrarVovo" menu-close="">
                    <i class="icon No Icon"></i>LOGIN VOVÓ</ion-item> -->

                <!--       <ion-item class="item-icon-left  side-menu-item" id="vovCooks-list-item5" ui-sref="nhaac.tipoUser" menu-close="" >
          <i class="icon No Icon"></i>ENTRAR</ion-item> -->

                <ion-item class="item-icon-left  side-menu-item" id="vovCooks-list-item5" ui-sref="nhaac.restaurantes" menu-close="" ng-show="checarPermissoes('cliente')">
                    <i class="icon No Icon"></i>VOVÓS ONLINE</ion-item>

                <ion-item class="item-icon-left  side-menu-item" id="vovCooks-list-item4" ui-sref="nhaac.promocoes" menu-close="" ng-show="checarPermissoes('cliente')">
                    <i class="icon No Icon"></i>PEDIR DELÍCIAS CASEIRAS</ion-item>


                <ion-item class="item-icon-left  side-menu-item" id="vovCooks-list-item6" ui-sref="nhaac.historico" menu-close="" ng-show="checarPermissoes('cliente')">
                    <i class="icon No Icon"></i>HISTÓRICO DE PEDIDOS</ion-item>

                <ion-item class="item-icon-left  side-menu-item" id="vovCooks-list-item7" ui-sref="nhaac.favoritos" menu-close="" ng-show="checarPermissoes('cliente')">
                    <i class="icon No Icon"></i>VOVÓS PREDILETAS</ion-item>

                <ion-item class="item-icon-left  side-menu-item" id="vovCooks-list-item8" ui-sref="nhaac.indica_restaurante" menu-close="">
                    <i class="icon No Icon"></i>INDICAR VOVÓS</ion-item>

                <ion-item class="item-icon-left  side-menu-item" id="vovCooks-list-item9" ui-sref="nhaac.perfil" menu-close="" ng-show="checarPermissoes('cliente')">
                    <i class="icon No Icon"></i>MEU PERFIL</ion-item>

                <!--    <ion-item class="item-icon-left  side-menu-item" id="vovCooks-list-item1" ui-sref="intro" menu-close="">
          <i class="icon No Icon"></i>TORNAR-SE VOVÓ COOKS</ion-item> -->

                <ion-item class="item-icon-left  side-menu-item" id="vovCooks-list-item11" ui-sref="nhaac.vovoDashboard" menu-close="" ng-show="checarPermissoes('fornecedor')">
                    <i class="icon No Icon"></i>PERFIL VOVÓ</ion-item>

                <ion-item class="item-icon-left  side-menu-item" id="vovCooks-list-item11" ui-sref="nhaac.contato" menu-close="">
                    <i class="icon No Icon"></i>CONTATO</ion-item>


            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

And my side menu controller:

    .controller("side_menusCtrl", function ($scope, $rootScope, $state, $ionicScrollDelegate, $http, $httpParamSerializer, $stateParams, $timeout, $ionicLoading, $ionicPopup, $ionicPopover, $ionicSlideBoxDelegate, $ionicHistory, ionicMaterialInk, ionicMaterialMotion, $window) {


    $rootScope.page_id = "side_menus";

    $scope.scrollTop = function () {
        $ionicScrollDelegate.$getByHandle("top").scrollTop();
    };
    // open external browser 
    $scope.openURL = function ($url) {
        window.open($url, "_system", "location=yes");
    };
    // open AppBrowser
    $scope.openAppBrowser = function ($url) {
        window.open($url, "_blank", "closebuttoncaption=Done");
    };
    // open WebView
    $scope.openWebView = function ($url) {
        window.open($url, "_self");
    };

    // Set Motion
    $timeout(function () {
        ionicMaterialMotion.slideUp({
            selector: ".slide-up"
        });
    }, 300);

    //        $ionicPopover.fromTemplateUrl('templates/filters/side-filter.html', {
    //            scope: $scope,
    //        }).then(function (popover) {
    //            $scope.popover = popover;
    //        });

    //        $scope.demo = 'ios';
    //        $scope.setPlatform = function (p) {
    //            document.body.classList.remove('platform-ios');
    //            document.body.classList.remove('platform-android');
    //            document.body.classList.add('platform-' + p);
    //            $scope.demo = p;
    //        }

    var tipo = '';

    // $scope.checarPermissoes();

    $scope.checarPermissoes = function (tipo) {
        var permitido;

        if (tipo === 'cliente' && $window.localStorage.getItem("cod_cliente") !== null) {
            permitido = true;
        } else if (tipo === 'fornecedor' && $window.localStorage.getItem("global_fornecedor") !== null) {
            permitido = true;
        } else {
            permitido = false;
        }

        return permitido;
    };


    // animation ink (ionic-material)
    ionicMaterialInk.displayEffect();
    $scope.rating = {};
    $scope.rating.max = 5;
})

In your app.js:

The menu should be the first:

$stateProvider
        .state("nhaac", {
            url: "/nhaac",
            abstract: true,
            templateUrl: "templates/nhaac-side_menus.html",
            controller: "side_menusCtrl",
        })

I hope it helps...

  • 1

    thank you so much for the @Ramos tips. I will change my menu.

  • This function I’ve used : $Scope.scrollTop = Function () { $ionicScrollDelegate. $getByHandle("top"). scrollTop(); }; and use it sometimes. The other ones you create I think I’ve never used, so serve these functions: openUrl, openAppBrowser, openWebView and the timeout ?

  • Could you explain what these functions you create are for? Have you ever messed with the ion-Infinite-scroll? I posted a question here about the ion-Infinite-scroll component, but I haven’t been able to resolve it yet. This one from the menu I was able to solve by seeing an example of Ionic itself on sidemenu. thanks a lot for the help. @Ramos

  • Are the material design.... voou explain as soon as you can.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.