7

Estou a desenvolver uma aplicação em ionic eu não estou a conseguir colocar o side menus left a primeira página da aplicação e um login não estou a conseguir fazer o side menus na pagina home.html que é para essa página que vai o utilizador quando feito o login com sucesso.

home.html

<ion-header-bar class="bar-color_header">
    <button style="color: #ffffff;" menu-toggle="left" class="button button-icon icon ion-navicon"></button>
    <div class="title" style="color: #ffffff;">Home</div>
</ion-header-bar>
<ion-content>
    <div class="row">
        <div class="col">
            <h5>Encontre o que procura em SabeOnde</h5>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <a href="#/home">
                <div class="img_comer">
                    <div class="texto_categorias_home">
                        <div><i class="fa fa-cutlery fa-2x"></i></div>
                        Comer
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <a href="#/home">
                <div class="img_dormir">
                    <div class="texto_categorias_home">
                        <div><i class="fa fa-bed fa-2x"></i></div>
                        Dormir
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <a href="#/home">
                <div class="img_comprar">
                    <div class="texto_categorias_home">
                        <div><i class="fa fa-shopping-cart fa-2x"></i></div>
                        Comprar
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <a href="#/home">
                <div class="img_servicos">
                    <div class="texto_categorias_home">
                        <div><i class="fa fa-wrench fa-2x"></i></div>
                        Serviços
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <a href="#/home">
                <div class="img_bares">
                    <div class="texto_categorias_home">
                        <div><i class="fa fa-glass fa-2x"></i></div>
                        Bares
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <a href="#/home">
                <div class="img_lazer">
                    <div class="texto_categorias_home">
                        <div><i class="fa fa-university fa-2x"></i></div>
                        Lazer
                    </div>
                </div>
            </a>
        </div>
    </div>
</ion-content>

app.js

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a   <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})
.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('menu', {
            url: "/menu",
            templateUrl: "templates/menu.html"
        })
        .state('login', {
            url: '/login',
            templateUrl: 'templates/login.html'
        })
        .state('entrar', {
            url: '/entrar',
            templateUrl: 'templates/entrar.html'
        })
        .state('registo', {
            url: '/registo',
            templateUrl: 'templates/registo.html'
        })
        .state('recuperar-password', {
            url: '/recuperar-password',
            templateUrl: 'templates/recuperar-password.html'
        })
        .state('home', {
            url: '/home',
            templateUrl: 'templates/home.html'
        })
    $urlRouterProvider.otherwise("/login");
})

2 Respostas 2

1

Então nessa caso você pode substituir o href pelo ng-click tipo.:

//HTML
<a ng-click="irPara()">Ir para</a>
//Coloca isso em sua controller 
$scope.irPara= function () {
            $state.go('nome da rota');
 }

Lembrando que esse exemplo está baseado nos seguinte frameworks:
Angular JS
Ionic Framework
Require JS

Pequise sobre o Require JS vai ver como tudo fica mais fácil!

1

Pelo que consegui entender você não esta conseguindo colocar o side menu left. bom se é isto mesmo que entendi sua solução seria algo como:

<ion-side-menus>
  <!-- Left menu -->
  <ion-side-menu side="left">
  </ion-side-menu>

  <ion-side-menu-content>
  <!-- Main content, usually <ion-nav-view> -->
  </ion-side-menu-content>

</ion-side-menus>

E depois para abrir/fechar o menu:

function ContentController($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}

Referencia: Directive - ionSideMenus

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .