In my application, operations can be performed. When a user performs an operation increases their number of points that are displayed in the menu my problem is that I can not update this result in the menu since when I do a state.reload () reload only the controller that I access but not the From the menu that is the SndController driver. I've tried putting $ ionicConfigProvider.views.swipeBackEnabled (false); But it does not work What can I do? I leave you the code of the menu and the one of app.js. Thank you
<ion-side-menu side="left" ng-controller="NavController">
<ion-content has-header="true" class="menuscroll">
<ul class="list" ng-show="currentState == 'menuconsumidor'">
<h1 class="text-center title">¡Hola {{usuario.nombre}}!</h1>
<div class="resumen-puntos puntosMenu"><i class="icon icoNivel {{claseNiveles}}"></i><span class="txtMenu">Tienes <span class="resaltado">{{usuario.puntos | commaToDecimal}} €</span> acumulados <br/>Tu nivel es <span class="resaltado uppercase">{{usuario.tramo}}</span></span></div>
<a ui-sref="snd.datos" nav-clear class="item datos" ng-click="toggleLeft()"><i class="ion-android-person"></i>Datos personales<i class="ion-chevron-right"></i></a>
<ion-item vinculaciones class="item vinculaciones"><i class="ion-android-people"></i>Vinculaciones<i class="ion-chevron-right"></i></ion-item>
<a ui-sref="snd.niveles({reload: true})" nav-clear class="item niveles" ng-click="toggleLeft()"><i class="ion-ios-star-outline"></i>Niveles y Zonas<i class="ion-chevron-right"></i></a>
<a ui-sref="snd.terminos" nav-clear class="item terminos" ng-click="toggleLeft()"><i class="ion-android-document"></i>Términos y condiciones<i class="ion-chevron-right"></i></a>
<a ui-sref="snd.ayuda" nav-clear class="item ayuda" ng-click="toggleLeft()"><i class="ion-help-circled"></i>Ayuda<i class="ion-chevron-right"></i></a>
<a ui-sref="snd.share" nav-clear class="item comparte" ng-click="toggleLeft()"><i class="ion-android-share-alt"></i>Comparte<i class="ion-chevron-right"></i></a>
<ion-item log-out class="item salir"><i class="ion-android-exit"></i>Salir<i class="ion-chevron-right"></i></ion-item>
</ul>
<ul class="list" ng-show="currentState == 'menucomercio'">
<h1 class="text-center title">¡Hola {{usuario.nombreComercio}} !</h1>
<div class="resumen-puntos puntosMenu"><i class="icon icoNivel {{claseNiveles}}"></i><span class="txtMenu">Este mes has facturado <span class="resaltado">{{usuario.importeFacturadoMesActual | commaToDecimal}} €</span> <br/>Tu nivel es <span class="resaltado uppercase">{{usuario.tramo}}</span></span></div>
<a ui-sref="snd.datoscomercio({reload: true})" nav-clear class="item datos" ng-click="toggleLeft()"><i class="ion-android-person"></i>Datos personales<i class="ion-chevron-right"></i></a>
<a ui-sref="snd.nivelescomercio({reload: true})" nav-clear class="item niveles" ng-click="toggleLeft()"><i class="ion-ios-star-outline"></i>Niveles y Zonas<i class="ion-chevron-right"></i></a>
<a ui-sref="snd.terminoscomercio" nav-clear class="item terminos" ng-click="toggleLeft()"><i class="ion-android-document"></i>Términos y condiciones<i class="ion-chevron-right"></i></a>
<a ui-sref="snd.ayudacomercio" nav-clear class="item ayuda" ng-click="toggleLeft()"><i class="ion-help-circled"></i>Ayuda<i class="ion-chevron-right"></i></a>
<a ui-sref="snd.share" nav-clear class="item comparte" ng-click="toggleLeft()"><i class="ion-android-share-alt"></i>Comparte<i class="ion-chevron-right"></i></a>
<ion-item log-out class="item salir"><i class="ion-android-exit"></i>Salir<i class="ion-chevron-right"></i></ion-item>
</ul>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Snd controller is my menu in my application .
.state('snd', {
url : '/snd',
templateUrl : 'templates/snd-abstract.html',
abstract : true,
cache: false,
controller : 'SndController'
})
.state('snd.home', {
cache: false,
url: '/home',
views: {
'snd': {
templateUrl: 'templates/snd-home.html',
controller : 'SndHomeController'
}
}
})
.state('snd.terminos', {
cache: false,
url: '/terminos',
views: {
'snd': {
templateUrl: 'templates/snd-terminos.html',
controller : 'SndEstaticasController'
}
}
})
.state('snd.ayuda', {
cache: false,
url: '/ayuda',
views: {
'snd': {
templateUrl: 'templates/snd-ayuda.html',
controller : 'SndEstaticasController'
}
}
})
.state('snd.operaciones', {
cache: false,
url: '/operaciones',
views: {
'snd': {
templateUrl: 'templates/snd-operaciones.html',
controller : 'SndOperacionesController'
}
}
})
.state('snd.detalleoperacion', {
url: '/operaciones/:operacionId',
cache: false,
views: {
'snd': {
templateUrl: 'templates/snd-detalle-operacion.html',
controller : 'SndOperacionDetalleController'
}
}
})
.state('snd.nivelescomercio', {
url: '/nivelescomercio',
cache: false,
views: {
'snd': {
templateUrl: 'templates/snd-comercio-niveles.html',
controller : 'SndNivelesComercioController'
}
}
})
.state('snd.ofertascomercio', {
url: '/ofertascomercio',
cache: false,
views: {
'snd': {
templateUrl: 'templates/snd-comercio-ofertas.html',
controller : 'SndOfertasComercioController'
}
}
})
.state('snd.nuevaSedeComercio', {
url: '/nuevaSedeComercio',
cache: false,
views: {
'snd': {
templateUrl: 'templates/snd-comercio-nueva-sede.html',
controller : 'SndNuevaSedeComercio'
}
}
})
I resolved . I push this code in my parent state...
$scope.$on('$ionicView.beforeEnter', function() {
console.log(' reload state before enter children state');
$scope.usuario = UsuarioFactory.getUsuario();
console.log(usuario);
});
Related
I have an accordion list populated as follows:
<ion-list>
<div ng-repeat="day in days"><br>
<div class="item item-icon-left" ng-click="toggleGroup(day)" ng-class="{active: isGroupShown(day)}">
<i class="icon icon-accessory" ng-class="isGroupShown(day) ? 'ion-minus' : 'ion-plus'"></i>
{{day.name}}
</div>
<a class="item item-icon-left item-accordion" ng-show="isGroupShown(day)" ng-repeat="exercise in day.exercises" type="item-text-wrap"
href="#/tab/plan/{{exercise.id}}">
{{exercise.name}}
<!-- Trial LED -->
<span style="float:right;"><i ng-show="{{exercise.watchedToday}}==true" class="ion-checkmark-round"></i></span>
</a>
</div>
</ion-list>
This populates list as follows:
Route which handles this is:
.state('tab.exercise', {
url: '/plan/:exerciseId',
resolve: {
authenticated: ['djangoAuth', function(djangoAuth){
return djangoAuth.authenticationStatus();
}],
},
views: {
'tab-plan': {
templateUrl: '/templates/video.html',
controller: 'videoCtrl'
}
},
cache: false
})
However I have few other routes like:
.state('tab.wordschatz', {
url: '/plan/12', <= notice here (this can be 8/9/10/11/12)
resolve: {
authenticated: ['djangoAuth', function(djangoAuth){
return djangoAuth.authenticationStatus();
}],
},
views: {
'tab-plan': {
templateUrl: '/templates/wortschatz.html',
controller: 'wortschatzCtrl',
data: {
css: '/css/wortschatz.css'
}
}
},
cache: false
})
I basically want to navigate to different pages on alternate accordion elements clicks. How can I have separate anchor links for alternate elements?
The Google Map doesn't appear. I work with Ionic and AngularJS and I use the Geolocation plugin.
This is my routing for the app:
angular.module('app.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
.state('menu.rServation', {
url: '/Réservation',
views: {
'side-menu21': {
templateUrl: 'templates/rServation.html',
controller: 'rServationCtrl'
}
}
})
.state('menu.voiture', {
url: '/Voiture',
views: {
'side-menu21': {
templateUrl: 'templates/voiture.html',
controller: 'voitureCtrl'
}
}
})
.state('menu.paramTres', {
url: '/Paramètres',
views: {
'side-menu21': {
templateUrl: 'templates/paramTres.html',
controller: 'paramTresCtrl'
}
}
})
.state('menu.LocationMap', {
url: '/Location',
views: {
'side-menu21': {
templateUrl: 'templates/Locationmap.html',
controller: 'LocationMapCtrl'
}
}
})
.state('menu.LocationMMap', {
url: '/Locationn',
views: {
'side-menu21': {
templateUrl: 'templates/LocationMMap.html',
controller: 'MapCtrl'
}
}
})
.state('menu.login', {
url: '/Login',
views: {
'side-menu21': {
templateUrl: 'templates/login.html',
controller: 'loginCtrl'
}
}
})
.state('menu', {
url: '/side-menu21',
templateUrl: 'templates/menu.html',
abstract:true
})
.state('menu.detailsVoiture', {
url: '/Voiture/:Id',
views: {
'side-menu21': {
templateUrl: 'templates/detailsVoiture.html',
controller: 'voitureCtrl'
}
}
})
.state('menu.conexion', {
url: '/Conexion',
views: {
'side-menu21': {
templateUrl: 'templates/conexion.html',
controller: 'conexionCtrl'
}
}
})
.state('menu.detailsPreReservation',{
url: '/DetailsPreReservation',
views: {
'side-menu21': {
templateUrl: 'templates/detailsPreReservation.html',
controller: 'detailsPreReservationCtrl'
}
}
})
.state('menu.profile',{
url: '/profile',
views: {
'side-menu21': {
templateUrl: 'templates/profil.html',
controller: 'profilCtrl'
}
}
})
$urlRouterProvider.otherwise('/side-menu21/Réservation')
});
and this is mu controller
.controller('MapCtrl', function($scope, $state, $cordovaGeolocation) {
var options = {timeout: 10000, enableHighAccuracy: true};
$cordovaGeolocation.getCurrentPosition(options).then(function(position){
var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
}, function(error){
console.log("Could not get location");
});
})
and this my view:
<ion-view>
<ion-content>
<div id="map" data-tap-disabled="true"></div>
</ion-content>
</ion-view>
and this my menu.html for side menu:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-calm">
<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">
<ion-header-bar class="bar-calm">
<div class="title">Menu</div>
</ion-header-bar>
<ion-content padding="false" class="side-menu-left has-header">
<ion-list>
<ion-item ui-sref="menu.rServation" menu-close="" >
<i class="icon ion-home balanced ">Réservation</i>
</ion-item>
<ion-item ui-sref="menu.voiture" menu-close="" >
<i class="icon ion-model-s balanced">Voitures</i>
</ion-item>
<ion-item ui-sref="menu.paramTres" menu-close="" >
<i class="icon ion-android-settings balanced">Paramètres</i>
</ion-item>
<ion-item ui-sref="menu.LocationMap" menu-close="" >
<i class="icon ion-map balanced">Location Agence</i>
</ion-item>
<ion-item ui-sref="menu.LocationMMap" menu-close="" >
<i class="icon ion-map balanced">Locationn Agence</i>
</ion-item>
<ion-item ui-sref="menu.login" menu-close="" >
<i class="icon ion-log-in balanced">Login</i>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
This is an image for the template and no error
You didn't set the height for the container:
<style>
#map {
height: 400px;
}
</style>
I have an Ionic sidemenu project with the following menu:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable" align-title="center">
<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="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-content>
<div class="list">
<a class="item item-icon-left" menu-close href="#/app/products">
<i class="icon ion-home"></i>
<h2>Home</h2>
</a>
<a class="item item-icon-left" menu-close href="#/app/account">
<i class="icon ion-person"></i>
<h2>mein Konto</h2>
</a>
<a class="item item-icon-left" menu-close href="#/app/orders">
<i class="icon ion-android-list"></i>
<h2>meine Bestellungen</h2>
</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
The hrefs defined here are all working as intended.
My products page now has several sub-pages.
Html-File:
<ion-view view-title="Home">
<ion-content>
<ion-list>
<ion-item ng-repeat="product in products" href="#/app/products/{{product.templateUrl}}">
{{product.name}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
JS-File:
angular.module('App.Products', ['App.Products.Prints', 'App.Products.Box', 'App.Products.Book', 'App.Products.Framed'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('app.products', {
url: "/products",
views: {
'menuContent': {
templateUrl: "modules/products/products.html",
controller: 'ProductsController'
}
}
});
})
.controller('ProductsController', function ($scope, ProductsFactory) {
$scope.products = [];
init();
function init() {
$scope.products = ProductsFactory.getProducts();
}
})
.factory('ProductsFactory', function() {
var products = [
{
name: 'Prints',
img: 'img/wardwarz.png',
templateUrl: 'prints'
},
{
name: 'PhotoBox',
img: 'img/argo.png',
templateUrl: 'box'
},
{
name: 'Photobuch',
img: 'img/django.png',
templateUrl: 'book'
},
{
name: 'Photo im Rahmen',
img: 'img/ic_profile.png',
templateUrl: 'framed'
}
];
var factory = {};
factory.getProducts = function () {
// Hier könnte ein HTTP Request rein um die Produkte vom Server zu erhalten!
return products;
}
return factory;
});
and to show one example one content of a sub page:
Html-File:
<ion-view view-title="Prints">
<ion-content>
</ion-content>
</ion-view>
JS-File:
angular.module('App.Products.Prints', [])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('app.products.prints', {
url: "/products/prints",
views: {
'menuContent': {
templateUrl: "modules/products/prints/prints.html"
}
}
});
});
When i now start the app ionic serve the navigation of the sidemenu works fine and i can open my products page. The navigation to prodcuts/prints does not work. I dont get an error message or anything. There is just nothing happening after the click on the item.
Whats going worng here?
An example Project can be found here: Mega File - MyApp.rar
Instead of using only href to do your navigation use
ui-sref="name_of_the_state"
Example:
ui-sref="app.products.prints"
This way you will not have issues with your navigation on angular/ionic.
If you even have a parameter in your route, like:
$stateProvider.state('app.products.edit', {
url: "/products/edit/:id",
views: {
'menuContent': {
templateUrl: "modules/products/prints/prints.html"
}
}
});
you can use:
ui-sref="app.products.edit(1)"
Also, I'm not seeying an abstract route on this, the app. It should be like:
app -> abstract
app.products
app.products.prints
I was able to simulate the error on my PC.
When you work with nested states you like app.products.print you need a intermediary view like this:
Example from a code I have on my pc that is working:
.state("admin", {
url: "/admin",
abstract: true,
views: {
"body": { templateUrl: "partials/_layoutAdmin.html" }
}
})
.state("admin.page", {
url: "/page/:idEdition",
abstract: true,
views: {
"header": { templateUrl: "partials/header.html", controller: "DefaultHeaderController" },
"content": { templateUrl: "partials/_layoutAdminEdition.html" }
}
})
.state("admin.page.create", {
url: "/create",
views: {
"content": { templateUrl: "partials/admin.page.form.html", controller: "PageFormController" }
}
})
Example of Templates
The main layout has thi
<div data-ui-view="body"></div>
The _layoutAdmin has this one
<header data-ui-view="header"></header>
<div class="container-fluid">
<div class="row">
<div data-ui-view="content"></div>
</div>
</div>
When the code enters the admin state it will load this first piece...
THEN...
<div data-ui-view="content" class="edition-form"></div>
AND THEN... the form CODE
So, in your case, you have app.products.prints:
app -> need a view -> ok you got it
app.products -> also need a view -> ok you got it
app.products.prints -> inside app.products view (products.html) you need a to show this inside it.
For simplicity, I suggest you to change it's name to app.productsPrint (without the "." and you'll be able to do it the way you are doing it right now with no impact.
Made some changes on the code you provided:
<ion-view view-title="Home">
<ion-content>
<div ui-view="myTestContent"></div>
</ion-content>
</ion-view>
Notice the ui-view="myTestContent"
and
.state('app.products.prints', {
url: "/prints",
views: {
'myTestContent': {
templateUrl: "modules/products/prints/prints.html"
}
}
});
and it worked.
So, in your case I recommend you to use productPrints instead of products.print. This nesting is used in those view inside view scenarios.
I have started sideMenu app in ionic and tried some implementation. Initially, ionicModal is used to show login so i change it with ion-list item like;
<ion-side-menu side="left" >
<ion-header-bar class="bar-stable bar-dark">
<a ng-click="redirectToWeb()" > <h1 class="title">NerdApp</h1></a>
</ion-header-bar>
<ion-content >
<ion-list class="BGcolorDG">
<ion-item nav-clear menu-close class="BGcolorDG item item-icon-left item-content-modified" href="#/app/login" ng-show="control.showLogin" > <!--ng-click="login()" -->
<i class="icon ion-locked"></i> <span>Login</span>
</ion-item>
<ion-item nav-clear menu-close href="#/app/search" class="item item-icon-left BGcolorDG item-content-modified">
<i class="icon ion-search"></i><span>Search</span>
</ion-item>
<ion-item nav-clear menu-close href="#/app/browse" class="item item-icon-left BGcolorDG item-content-modified">
<i class="icon ion-ios-browsers"></i><span>Browse</span>
</ion-item>
<ion-item nav-clear menu-close href="#/app/playlists" class="item item-icon-left BGcolorDG item-content-modified">
<i class="icon ion-music-note"></i> <span>Playlists</span>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
and provide routeState as
state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.login', {
url: "/login",
views: {
'menuContent': {
templateUrl: "templates/login.html",
controller: "LoginCtrl"
}
}
})
.state('app.home', {
url: "/home",
views: {
'menuContent': {
templateUrl: "templates/home.html",
controller: "HomeCtrl"
}
}
})
And default route to home controller.
$urlRouterProvider.otherwise('/app/home');
the app controller is as
.controller('AppCtrl', function($scope,$timeout,$location,$rootScope) {
$scope.control = {
showLogin:true
};
if($rootScope.showLogin != undefined && $rootScope.showLogin == false){
$scope.control.showLogin = false;
}
})
Inside loginControl i am checking and redirecting it back to home controller as
$scope.login = function() {
if ($scope.loginData.username == 'hassaan' && $scope.loginData.password == 'khan') {
$rootScope.showLogin = false;
// $location.path('#/app');
$state.go('app.home');
}else{
alert('Incorrect credentials');
}
}
i have tried both $location.path and $state.go and what its doing is redirecting to home page but 'not showing the sidemenu' and when i inspect in browser it showing sidemenu hidden.
The flow images of test app is as
Try use $rootScope
pass it to AppCtrl
.controller('AppCtrl', function (...., $rootScope) {
// and then
$rootScope.control = {
showProfile: false
};
after success authentication - make it true
$rootScope.control = {
showProfile: true
};
now it should work as you expected
Don't use $rootscop if you dont need to.
You can send variables to other controllers with the router from angular using params.
.state('menu.employeeInfo', {
url: '/employeeInfo',
views: {
'side-menu21': {
templateUrl: 'templates/employeeInfo.html',
controller: 'employeeInfoCtrl'
}
},
params: {
appointmentObj: null,
subassignmentObj: null
}
})
You can then pass these vars in the following manner.
$scope.gotoAppointment = function (Appointment, Subassignment) {
$state.go('menu.employeeInfo', { appointmentObj: Appointment, subassignmentObj: Subassignment }, { reload: true });
}
I have this in my app.js
.state('tab.events', {
url: "/events",
views: {
'tab-events': {
templateUrl: "templates/events/List.html",
controller: 'EventsListController'
}
}
})
.state('tab.events.details', {
url: "/:eventId",
views: {
'tab-events': {
templateUrl: "templates/events/Details.html",
controller: 'EventDetailsController'
}
}
})
This is List.html
...
<ion-list>
<ion-item ng-repeat="event in all_events.models" type="item-text-wrap" ui-sref="tab.events-details({eventId:event.id})" class="item item-icon-right">
{{event.name}}
</ion-item>
</ion-list>
...
This is Details.html
<ion-view title="Event">
<ion-content>
<div class="row">
<div class="col">
DETAILS HERE
</div>
</div>
</ion-content>
</ion-view>
This is my tabs.html
...
<ion-tab title="Events" icon="icon ion-calendar" id="tab-events" ui-sref="tab.events">
<ion-nav-view name="tab-events" class="slide-left-right"></ion-nav-view>
</ion-tab>
...
When clicking on an event, it doesnt slide to Details.html, Yet when i change the state and ui-sref from tab.events.details to tab.events-details and it works. Am i right in saying that by changing the details state that it is no longer a child of list?
It's an old question, but have you tried to change tab-friends to tab-friends#tab?
.state('tab.friends.detail', {
url: '/:friendId',
views: {
'tab-friends#tab': {
templateUrl: 'friend-detail.html',
controller: 'FriendDetailCtrl'
}
}
})
Should work. My problem though is that when you jump directly to this URL there is no Back-Button.