We Keep Coding

AngularJS Force Back Button Route

My back button is sending me to the first page/state of my app (cadastreSe). How can I force it to go back to previous page/state ('menu.temporada2016') with my button id="temporada2016-button3" active. Is it possible with angularjs?
I hat to enable it with $scope.$on('$ionicView.beforeEnter'...
states:
angular.module('app.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('menu.temporada2016', {
cache: false,
url: '/page1',
views: {
'side-menu21': {
templateUrl: 'templates/temporada2016.html',
controller: 'temporada2016Ctrl',
params: { dataToTemp: false }
}
}
})
.state('menu.fotos', {
url: '/page2',
views: {
'side-menu21': {
templateUrl: 'templates/fotos.html',
controller: 'fotosCtrl'
}
}
})
.state('menu.configuraEs', {
url: '/page3',
views: {
'side-menu21': {
templateUrl: 'templates/configuraEs.html',
controller: 'configuraEsCtrl'
}
}
})
.state('menu', {
url: '/side-menu21',
templateUrl: 'templates/menu.html',
abstract:true
})
.state('detalhes', {
cache: false,
url: '/page4',
params: {
dataToDetails: false
},
templateUrl: 'templates/detalhes.html',
controller: 'detalhesCtrl'
})
.state('cadastreSe', {
url: '/page5',
templateUrl: 'templates/cadastreSe.html',
controller: 'cadastreSeCtrl'
})
.state('home', {
url: '/page6',
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
})
.state('suporte', {
url: '/page7',
templateUrl: 'templates/suporte.html',
controller: 'suporteCtrl'
})
.state('fotos2', {
url: '/page8',
templateUrl: 'templates/fotos2.html',
controller: 'fotos2Ctrl',
params: {
dataToFotos: false
}
})
$urlRouterProvider.otherwise('/page5')
});
controller:
.controller('fotos2Ctrl', ['$scope', '$state', '$ionicModal', '$ionicSlideBoxDelegate', '$ionicScrollDelegate', function ($scope, $state, $ionicModal, $ionicSlideBoxDelegate, $ionicScrollDelegate) {
$scope.$on('$ionicView.beforeEnter', function(event, viewData){
viewData.enableBack = true;
});
$scope.$on('$routeChangeSuccess', function(event, current, previous){
});
if(!$state.params.dataToFotos) {
console.log($state.params.dataToFotos);
}else{
console.log($state.params.dataToFotos);
$scope.images = $state.params.dataToFotos.album;
}
$scope.zoomMin = 1;
// image gallery
$scope.showImages = function(index) {
$scope.activeSlide = index;
$scope.showModal('templates/popover.html');
}
$scope.showModal = function(templateUrl) {
$ionicModal.fromTemplateUrl(templateUrl, {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
$scope.modal.show();
});
}
// Close the modal
$scope.closeModal = function() {
$scope.modal.hide();
$scope.modal.remove()
};
$scope.updateSlideStatus = function(slide) {
var zoomFactor = $ionicScrollDelegate.$getByHandle('scrollHandle' + slide).getScrollPosition().zoom;
if (zoomFactor == $scope.zoomMin) {
$ionicSlideBoxDelegate.enableSlide(true);
} else {
$ionicSlideBoxDelegate.enableSlide(false);
}
};
}])
fotos2.html
<ion-view title="Fotos ..." id="page8" style="background-color:#FFFFFF;">
<ion-content padding="true" class="has-header">
<!--<div class="row responsive-md">
<div class="col col-25" ng-repeat="image in images">
<img ng-src="http://localhost/dashboard/{{image.FILE}}" width="100%" />
</div>
</div>-->
<div class="row" ng-repeat="image in images" ng-if="$index % 4 === 0">
<div class="col col-25" ng-if="$index < images.length">
<img class="grid-thumb" ng-src="http://localhost/dashboard/{{images[$index].FILE}}" width="100%" ng-click="showImages($index)" />
</div>
<div class="col col-25" ng-if="$index + 1 < images.length">
<img class="grid-thumb" ng-src="http://localhost/dashboard/{{images[$index + 1].FILE}}" width="100%" ng-click="showImages($index+1)" />
</div>
<div class="col col-25" ng-if="$index + 2 < images.length">
<img class="grid-thumb" ng-src="http://localhost/dashboard/{{images[$index + 2].FILE}}" width="100%" ng-click="showImages($index+2)" />
</div>
<div class="col col-25" ng-if="$index + 3 < images.length">
<img class="grid-thumb" ng-src="http://localhost/dashboard/{{images[$index + 3].FILE}}" width="100%" ng-click="showImages($index+3)" />
</div>
</div>
</ion-content>
</ion-view>
temporada2016.html
<ion-view title="Temporada 2016" id="page1" style="background-color:#FFFFFF;">
<ion-content padding="true" class="has-header">
<div id="temporada2016-button-bar1" class="button-bar">
<button id="temporada2016-button2" style="color:#008BBB;" class="button button-light button-block button-outline" ng-class="{active_news_btn: active_news_btn}" ng-click="activate_news()">Notícias</button>
<button id="temporada2016-button3" style="color:#008BBB;" class="button button-light button-block button-outline" ng-class="{active_albums_btn: active_albums_btn}" ng-click="activate_albums()">Fotos</button>
</div>
<form id="temporada2016-form8" class="list" ng-show="search_news">
<label class="item item-input" name="search_news">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Pesquisar Notícia" ng-model="searchNews">
</label>
</form>
<div class="item item-body list-container" id="temporada2016-list-item-container4" ng-model="item_id" ng-repeat="x in items | filter:searchNews" item="x" href="#/x/{{x.ID}}" ng-click="open_item(x)" ng-show="news_list">
<div id="temporada2016-markdown7" style="margin-top:0px;color:#666666;">
<h2 style="color:#008BBB;">{{ x.TITLE }}</h2>
</div>
</div>
<!--<ion-list class="widget uib_w_1 d-margins" data-uib="ionic/list" data-ver="0">
<ion-item class="item widget uib_w_2" data-uib="ionic/list_item" data-ver="0" ng-repeat="x in items">{{ x.TITLE }}</ion-item>
</ion-list>-->
<ion-list id="fotos-list4" ng-show="albums_list">
<ion-item class="item-icon-left item-icon-right calm" id="fotos-list-item4" ng-model="album_name" ng-repeat="item in albums" item="item" href="#/item/{{item.FOLDER}}" ng-click="open_album(item)">
<i class="icon ion-images"></i>
{{item.FOLDER}}
<i class="icon ion-ios-arrow-forward"></i>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
index.html
<body ng-app="app" animation="slide-left-right-ios7">
<div>
<div>
<ion-nav-bar class="bar-calm">
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back"></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
</body>

You can overwrite the header of the specific page by adding a new one to the template of the specific view. it should be even outside and above of the tag. simply have it mirror your normal header. then implement a back-button which looks the exact same, but have it trigger an ng-click event which you can then use to route the user to that specific view you want him to go back to, either by using $state.go() or by using the $ionicHistory dependancy to navigate back through the navigation stack.

Ionic save input as variable

I am coding a weather app with open weather and I would like to save the city (the input) as a variable to call it on another view. So I would like to type in Vienna, send it to result.html and post there the current weather and to check which clothes I should wear, e.g. if the emperature is under 20° the app should say that I should wear a jacket.
Here is my home.html:
<ion-view title="" hide-nav-bar="true" hide-back-button="true">
<ion-content>
<div class="list card">
<div class="item item-avatar">
<img src="img/appicon.png">
<h2>Weather App</h2>
<p>What clothes do you need?</p>
</div>
</div>
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="City" ng-model="inputs.city">
</label>
<input class="button button-small" type="submit" ng-click="saveText(inputs)" value="Save" ng-controller="WeatherCtrl" />
</div>
</div>
</ion-content>
</ion-view>
Here my app.js:
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
controller: 'HomeCtrl',
templateUrl: 'views/home.html'
})
.state('result', {
url: '/result',
controller: 'WeatherCtrl',
templateUrl: 'views/result.html'
});
$urlRouterProvider.otherwise('/home');
})
.controller('HomeCtrl', function($scope) {
$scope.forcastDisabled = true
})
.controller('WeatherCtrl', function ($scope, $http, $ionicLoading, $location) {
var directions = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
$scope.getIconUrl = function(iconId) {
return 'http://openweathermap.org/img/w/' + iconId + '.png';
};
$scope.save = {};
$ionicLoading.show();
$scope.saveText = function (inputs) {
alert('Geht');
$location.path('result');
$scope.save = angular.copy(inputs);
$scope.inputs.city;
}
var vm = this;
// Vienna
var id = 2761369;
var city = 'Vienna';
var URL = 'http://api.openweathermap.org/data/2.5/weather?q=' + city;
var request = {
method: 'GET',
url: URL,
params: {
q: city,
mode: 'json',
units: 'imperial',
cnt: '7',
appid: '938c0cf5969f353bc718735f59aeffd6'
}
};
$http(request)
.then(function(response) {
vm.data = response.data;
$scope.weather = response.data;
}).
catch(function(response) {
vm.data = response.data;
$scope.weather = response.data;
});
$ionicLoading.hide();
});
And last my result.html:
<ion-view view-title="Current Weather">
<ion-content>
<div class="list card">
<div class="item item-divider"><h1>City: {{weather.name}}</h1></div>
<div class="item item-thumbnail-left">
<img src="{{getIconUrl(weather.weather[0].icon)}}" />
<h1>{{weather.weather[0].main}}</h1>
</div>
<div class="item item-icon-left">
<i class="icon ion-thermometer"></i>
<h2>Current Temperature: {{weather.main.temp}}°</h2>
</div>
<div class="item item-icon-left">
<i class="icon ion-thermometer"></i>
<h2>Today's High: {{weather.main.temp_max}}°</h2>
</div>
<div class="item item-icon-left">
<i class="icon ion-thermometer"></i>
<h2>Today's Low: {{weather.main.temp_min}}°</h2>
</div>
<div class="item item-icon-left">
<i class="icon ion-waterdrop"></i>
<h2>Humidity: {{weather.main.humidity}}%</h2>
</div>
<div class="item item-icon-left">
<i class="icon ion-shuffle"></i>
<h2>Wind: {{weather.wind.speed}}mph, {{getDirection(weather.wind.deg)}}</h2>
</div>
</div>
</ion-content>
</ion-view>
I know I am not currently using the input, because I do not know how to do this in js. So how can I call my input in the url and then in the request?
Thanks in advance!

Try to:
Add the city variable as a parameter to your state definition:
.state('result', {
url: '/result',
controller: 'WeatherCtrl',
templateUrl: 'views/result.html',
params: {
city: null
}
})
Pass the variable to the target state:
$state.go("result", {city: inputs.city});
Inject the $stateParams service and use the variable in the controller:
var city = $stateParams.city;
See https://github.com/angular-ui/ui-router/wiki/URL-Routing for more details.
EDIT
Check out this plunker demonstrating my changes: https://plnkr.co/edit/3dvhPCjv24Lebduy8BZz
Note that I moved the saveText() function to the HomeCtrl and removed the ng-controller directive from your home.html.

Ionic/Angular: Using the Master detail pattern, the details page isn't showing up?

My app uses tabs, a side menu, and the master details pattern. But, for some reason, when I try to navigate to the details page of an item in the list, nothing comes up. I'm not sure if I have the routing wrong or something.
If someone could help me out, I would really appreciate it! This is driving me crazy!
Thanks!
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: '/tab',
controller: 'TabsCtrl',
templateUrl: 'templates/tabs.html'
})
.state('tabs.feed', {
url: '/feed',
views: {
'tab-feed': {
templateUrl: 'templates/tab-feed.html',
controller: 'FeedCtrl'
}
}
})
.state('event-detail', {
url: '/event-detail/:name',
templateUrl: 'templates/event-detail.html',
controller: 'EventDetailCtrl'
})
tab-feed.html
<ion-view view-title="Feed" class="tab-feed">
<ion-nav-buttons side="right">
<button class="button icon ion-funnel" ng-click="modal2.show()">
</button>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-content>
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="search">
</label>
<ion-list>
<ion-item class="item item-thumbnail-left" ng-repeat="event in events | orderBy:'name' | searchEvents:search" type="item-text-wrap" href="#/event-detail/{{event.name}}">
<img ng-src="http://placehold.it/300x300">
<h2>{{event.name}}</h2>
<p><i class="ion-clock"></i> {{event.date | date: 'MM/dd/yy'}} | {{event.time | date: 'shortTime'}}</p>
<p><i class="ion-location"></i> {{event.location}}</p>
</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar align-title="center" class="bar-positive">
<div class="title" ng-click="modal.show()">Add Event</div>
</ion-footer-bar>
</ion-view>
EventDetailsController
.controller('EventDetailCtrl', ['getLocalStorage', function($scope, getLocalStorage, $stateParams, $ionicSideMenuDelegate) {
$scope.openMenu = function () {
$ionicSideMenuDelegate.toggleLeft();
};
var name = $stateParams.name;
$scope.event = getLocalStorage.getEvent(name);
}])
getLocalStorage Service
.factory('getLocalStorage', function () {
var eventList = [];
return {
list: eventList,
updateEvents: function (eventsArr) {
if (window.localStorage && eventsArr) {
localStorage.setItem("events", angular.toJson(eventsArr));
}
//update the cached version
eventList = eventsArr;
},
getEvents: function () {
eventList = angular.fromJson( localStorage.getItem("events") );
return eventList ? eventList : [];
},
getEvent: function(name){
for(i=0;i<eventList.length;i++){
if(eventList[i].name == name){
return eventList[i];
}
}
}
};
})

Can you try the following:
1) Add abstract: true to your tabs state:
.state('tabs', {
url: '/tab',
controller: 'TabsCtrl',
abstract: true,
templateUrl: 'templates/tabs.html'
})
2) In your EventDetailsCtrl, if you're thinking of minification, add all your injection parameters, in order, before function... like this:
.controller('EventDetailCtrl', ['$scope', 'getLocalStorage', '$stateParams', '$ionicSideMenuDelegate', function($scope, getLocalStorage, $stateParams, $ionicSideMenuDelegate) {
If the above doesn't help, please post your tabs.html code.

ng-show hanging my whole application

i am getting strange problem that when ever i am trying to put ng-show inside my popover.html , my app got hangs. and when i comment it my app works fine. i am realyy not getting that whats going wrong inside my code.
here is my popover.html :-
<ion-popover-view> <ion-content>
<div ng-show="showsettingButton()">
<ion-item menu-close ng-click="logout()"> Sign Out <span
class="item-icon-right"><i class="ion-chevron-right"></i></span> </ion-item>
<ion-item menu-close ui-sref="app.profile"> Settings <span
class="item-icon-right"><i class="ion-chevron-right"></i></span> </ion-item>
</div>
<div class="list" ng-repeat="title in Titlelist">
<a class="item"
ng-click="openpage(title.page_title,title.page_content)">
{{title.page_title}} </a>
</div>
</ion-content> </ion-popover-view>
here is my functions in controller :-
app
.controller(
'MenuCtrl',
function($scope, LocalStorage, $stateParams, $rootScope,
$state, store, ngCart, $window, $ionicHistory,
DataService, $ionicLoading, $ionicPopup, $http,
$ionicSideMenuDelegate, $ionicPopover) {
$scope.showsettingButton = function() {
$scope.popover.hide();
if (LocalStorage.getData("userId")) {
if (LocalStorage.getData("userId") !== "undefiened") {
DataService.setbooleanIsUserLoggedIn(true);
} else {
DataService.setbooleanIsUserLoggedIn(false);
}
} else {
DataService.setbooleanIsUserLoggedIn(false);
}
return DataService.getbooleanIsUserLoggedIn()
}
$ionicPopover.fromTemplateUrl('templates/popover.html', {
scope : $scope,
}).then(function(popover) {
$scope.popover = popover;
});
$scope.openpage = function(Pagetitle, Pagecontent) {
$scope.popover.hide();
var jsonObject = {
title : Pagetitle,
content : Pagecontent
}
DataService.addcontent(jsonObject)
$state.go('app.extraPage');
}
});
if i comment this line
<div ng-show="showsettingButton()"> <div/>
, my app works fine.
Any help will be greatly appreciated
Thanks.

<div ng-if="showsettingButton()">
<ion-item menu-close ng-click="logout()"> Sign Out <span
class="item-icon-right"><i class="ion-chevron-right"></i></span> </ion-item>
<ion-item menu-close ui-sref="app.profile"> Settings <span
class="item-icon-right"><i class="ion-chevron-right"></i></span> </ion-item>
</div>

ng-model not binding two way in a modal

I have this html
<body ng-controller="AppCtrl">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="nav-title-slide-ios7 bar-positive">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
</button>
</ion-nav-buttons>
<ion-nav-view animation="slide-left-right" name="main-view">
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<div class="list">
<a menu-close href="#" class="item item-icon-left">
<i class="icon ion-home">
</i>
Home
</a>
<a menu-close href="#/product" class="item item-icon-left">
<i class="icon ion-home">
</i>
products
</a>
<a menu-close href="#/category" class="item item-icon-left">
<i class="icon ion-home">
</i>
Category
</a>
</div>
</ion-side-menu>
</ion-side-menus>
<script id="product.html" type="text/ng-template">
<ion-view title="products">
<ion-content>
<div class="list">
<a class="item" href="#/product-form?id={{item.id}}" ng-repeat="item in items | filter:{nome: searchText}">
{
{item.nome}
}
<span class="item-note">
{
{item.quantidade}
}
</span>
</a>
</div>
</ion-content>
<div class="tabs tabs-icon-top">
<a class="tab-item" href="#/product-form">
<i class="icon ion-home"></i>
Adicionar
</a>
<a class="tab-item" ng-click="openModal()">
<i class="icon ion-search"></i>
Filtrar
</a>
</div>
</ion-view>
</div>
</script>
<script id="search.html" type="text/ng-template">
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input type="search" placeholder="busca" ng-model="searchText">
</label>
<button class="button button-clear" ng-click="closeModal()">
cancelar
</button>
</div>
</script>
</body>
And with this controller
angular.module('ionicApp.controllers', ['ionicApp.config', 'xc.indexedDB'])
.controller('ProductController',
function ($scope, $ionicPopup, $timeout,
$ionicModal, $indexedDB, $window, $ionicModal) {
$scope.safeApply = function (fn) {
var phase = this.$root.$$phase;
if (phase == '$apply' || phase == '$digest') {
if (fn && (typeof (fn) === 'function')) {
fn();
}
} else {
this.$apply(fn);
}
};
var OBJECT_STORE_NAME = constants.productStore;
$scope.items = [];
$scope.searchText = "";
$scope.getAll = function () {
var myObjectStore = $indexedDB.objectStore(OBJECT_STORE_NAME);
myObjectStore.getAll().then(function (results) {
// Update scope
$scope.safeApply(function () {
$scope.items = results;
});
});
};
$scope.getAll();
$ionicModal.fromTemplateUrl('search.html', {
scope: $scope,
animation: 'slide-left-right'
}).then(function (modal) {
$scope.modal = modal;
});
$scope.closeModal = function () {
alert($scope.searchText);
$scope.modal.hide();
};
$scope.openModal = function () {
//$scope.searchText = "a";
$scope.getAll();
$scope.modal.show();
};
$scope.closeModal = function () {
alert($scope.searchText);
$scope.modal.hide();
};
//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function () {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function () {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function () {
// Execute action
});
})
Edit
Here is where i define the ProductController
var app = angular.module('ionicApp', ['ionic', 'ionicApp.controllers']);
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('index', {
url: "/",
views: {
'main-view': {
templateUrl: "home.html",
controller: "AppCtrl"
}
}
})
.state('product', {
url: "/product",
views: {
'main-view': {
templateUrl: "product.html",
controller: 'ProductController'
}
}
});
$urlRouterProvider.otherwise("/");
});
My problem is the searchText model isn't updating when the value changes. I tried $watch, ng-options.
I can put a initial value to the $scope.searchText on openModal method, but after inputed values don't update the model value, because of this my list isn't filtered.
Anyone could help me?
Thanks.
Edit 2
I solved the problem adding the search text into the modal.
$scope.modal = modal;
$scope.modal.searchText = "";
And i changed the attribute to the new variable.
<input type="search" placeholder="busca" ng-model="modal.searchText">
Thanks for the support.

Two-way binding works best with a nested object. Change your bindings to use something like this
$scope.data = {};
$scope.data.items = [];

The template for the modal is still being requested before the modal is in scope. That's probably the reason