im currently using ionics sliding sideview for my navigation in my app but i want to switch to the new tabs. I have changed the code to make the tabs but $state.go doesn't seem to work any more. Here was the code for the old sliding navigation :
<ion-side-menus>
<ion-pane ion-side-menu-content="">
<ion-nav-bar class="bar-balanced nav-title-slide-ios7">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-pane>
<ion-side-menu side="left" class="main-menu">
<ion-header-bar class="bar bar-header bar-dark">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content has-header="true" ng-controller="SplashCtrl">
<ion-list>
<ion-item class="heading-item item item-avatar" nav-clear="" menu-close="" ui-sref="app.profile">
<div class="user-image-container">
<pre-img ratio="_1_1" helper-class="rounded-image">
<img class="user-image" ng-src="img/logo.jpg" spinner-on-load="">
</pre-img>
</div>
<h2 class="greeting">{{welcomename}}</h2>
<p class="message">Welcome back</p>
</ion-item>
<ion-item class="item-icon-left" nav-clear="" menu-close="" ui-sref="utab.google" ng-click="googleLoginClick()">
<i class="icon ion-document"></i>
<h2 class="menu-text">My Diary</h2>
</ion-item>
<ion-item class="item-icon-left" nav-clear="" menu-close="" ui-sref="utab.history" ng-click="historyClick()">
<i class="icon ion-document"></i>
<h2 class="menu-text">Search</h2>
</ion-item>
<ion-item class="item-icon-left" nav-clear="" menu-close="" ui-sref="utab.tasklist" ng-click="tasklistClick()">
<i class="icon ion-document"></i>
<h2 class="menu-text">Task List</h2>
</ion-item>
<ion-item class="item-icon-left" nav-clear="" menu-close="" ui-sref="utab.myforms" ng-click="myFormsClick()">
<i class="icon ion-document"></i>
<h2 class="menu-text">Unsent Instructions ({{unsentFormsCount}})</h2>
</ion-item>
<ion-item class="item-icon-left" nav-clear="" menu-close="" ui-sref="utab.banking" ng-click="bankingClick()">
<i class="icon ion-document"></i>
<h2 class="menu-text">Banking</h2>
</ion-item>
<ion-item class="item-icon-left" nav-clear="" menu-close="" ng-click="logoutClick()">
<i class="icon ion-document"></i>
<h2 class="menu-text">Logout</h2>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
The "XXclick" functions in the ng-clicks just call $stat.go's. Here is the new navigation :
(ive just added the top one to reduce the code )
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-content has-header="true" ng-controller="SplashCtrl">
<ion-tab title="Diary" icon-off="ion-ios-calendar-outline" icon-on="ion-ios-calendar" ui-sref="utab.google" ng-click="googleLoginClick()">
<ion-nav-view name="diary"></ion-nav-view>
</ion-tab>
</ion-content>
</ion-tabs>
Appreciate any help.
First no need to use ion-content in tab. There should be issue in routing also. Can you update full code or create code pen? so I can help you. I think below code pen link will help you.
'http://codepen.io/nirmal25/pen/BzQxzX'
Related
i made a filter for my ionic app that work very well on google chrome (whit the ionic serve) but when i build my apk it doesnt do anything what could be the problem?
this is the search code
<ion-content class="fondo has-subheader">
<div class="bar subheader item-input-inset bar-light">
<label class="item-input-wrapper">
<input type="search" ng-model="busqueda" placeholder="Buscar">
</label>
</div>
<ion-list>
<ion-item class="button button-icon center" ng-repeat="cate in categorias | filter: busqueda" type="item-text-wrap" href="#/tab/categoria/{{cate.id}}" >
<img class="img_cat" ng-src="{{cate.imagen}}" >
<h2 class="categoria_n">{{cate.nombre}}</h2>
</ion-item>
</ion-list>
</ion-content>
<ion-content class="fondo has-subheader">
<div class="bar subheader item-input-inset bar-light">
<label class="item-input-wrapper">
<input type="text" ng-model="search" placeholder="Buscar">
</label>
</div>
<ion-list>
<ion-item class="button button-icon center" ng-repeat="cate in categorias | filter : search" type="item-text-wrap" href="#/tab/categoria/{{cate.id}}" >
<img class="img_cat" ng-src="{{cate.imagen}}" >
<h2 class="categoria_n">{{cate.nombre}}</h2>
</ion-item>
</ion-list>
</ion-content>
And try ui-sref in replace of href="#/tab/categoria/{{cate.id}}"
i am tryng to show ion items with ion header bar having default ion nav bar.
The problem is, i want ionic bar header in one page rather than ionic nav bar. i tried with below but no luck.
Below from index.html
<ion-nav-bar class="bar-light bar-positive">
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back"></ion-nav-back-button>
</ion-nav-bar>
Below from one page:
<ion-view title="items" id="page15" >
<ion-content ng-controller="itemsCtrl" class="has-header" hide-nav-bar="true">
<ion-header-bar class="bar-positive">
<div class="buttons">
<button class="button button-icon icon ion-ios-minus-outline"
ng-click="data.showDelete = !data.showDelete"></button>
</div>
items
<div class="buttons">
<button class="button button-icon icon ion-log-out" ng-click="test()">
</button>
</div>
</ion-header-bar>
<ion-list show-delete="data.showDelete" >
<ion-item ng-repeat="item in items"
item="item"
class="item-remove-animate">
{{ item.name }}
<ion-delete-button class="ion-minus-circled"
ng-click="onItemDelete(item)">
</ion-delete-button>
</ion-item>
</ion-list>
</ion-content>
<div class="float-button" ng-click="additem()">
<span class="height-fix">
<a class="content">
<i class="ion-ios-plus-empty"> </i>
</a>
</span>
</div>
</ion-view>
The output is coming as below
i dont want the default ion nav bar n that page and want only ionic header bar.
I got it finally. Just add nav bar buttons instead of ionic header bar.
Hi i want to change the color of my nav-bar on every page load so i tried this :
in the menu.html :
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="{{headerClass}}">
<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">
<ion-header-bar class="bar-dark">
<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.home" menu-close="" class="item-icon-left"><i class="icon ion-home assertive"></i>Persée</ion-item>
<ion-item ui-sref="menu.offreSFR" menu-close="" class="item-icon-left"><i class="icon ion-ios-cart royal"></i>Offres SFR</ion-item>
<ion-item ui-sref="menu.mediatheque" menu-close="" class="item-icon-left"><i class="icon ion-ios-book energized"></i>Mediatheque</ion-item>
<ion-item ui-sref="menu.reporting" menu-close="" class="item-icon-left"><i class="icon ion-stats-bars balanced"></i>Reporting</ion-item>
<ion-item ui-sref="menu.FAQ" menu-close="" class="item-icon-left"><i class="icon ion-help calm"></i>FAQ</ion-item>
<ion-item ui-sref="connexion" menu-close="" class="item-icon-left"><i class="icon ion-log-out"></i>Se deconnecter</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
And in the controller.js :
angular.module('app.controllers', [])
.controller('homeCtrl', function($rootScope, $scope) {
$rootScope.headerClass = 'bar-assertive';
})
.controller('reportingCtrl', function($rootScope, $scope) {
$rootScope.headerClass = 'bar-balanced';
})
.controller('mediathequeCtrl', function($rootScope, $scope) {
$rootScope.headerClass = 'bar-energized';
})
.controller('offreSFRCtrl', function($rootScope, $scope) {
$rootScope.headerClass = 'bar-royal';
})
.controller('FAQCtrl', function($rootScope, $scope) {
$rootScope.headerClass = 'bar-calm';
})
.controller('connexionCtrl', function($rootScope, $scope) {
})
Thanks !!
You can change header bar color of nav-bar on every page change
.run(function($rootScope, $location) {
$rootScope.$on('$locationChangeStart', function(event, next, current) {
if ($location.path() == '/menu/home') {
$rootScope.headerClass = 'bar-assertive';
} else if ($location.path() == '/menu/reporting') {
$rootScope.headerClass = 'bar-balanced';
} else if ($location.path() == '/menu/mediatheque') {
$rootScope.headerClass = 'bar-energized';
} else if ($location.path() == '/menu/offreSFR') {
$rootScope.headerClass = 'bar-royal';
} else if ($location.path() == '/menu/FAQ') {
$rootScope.headerClass = 'bar-calm';
}else{
$rootScope.headerClass = 'bar-assertive';
}
});
})
Example
OR you can add ion-nav-bar in every view
menu.html
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-view name="menu"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<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.home" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-home assertive"></i>Persée</ion-item>
<ion-item ui-sref="menu.offreSFR" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-ios-cart royal"></i>Offres SFR</ion-item>
<ion-item ui-sref="menu.mediatheque" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-ios-book energized"></i>Mediatheque</ion-item>
<ion-item ui-sref="menu.reporting" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-stats-bars balanced"></i>Reporting</ion-item>
<ion-item ui-sref="menu.FAQ" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-help calm"></i>FAQ</ion-item>
<ion-item ui-sref="connexion" menu-close="" class="item-icon-left bar-dark"><i class="icon ion-log-out"></i>Se deconnecter</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
home.html
<ion-view title="Persée" cache-view="false">
<ion-nav-bar class="bar-assertive">
<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-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>
repoerting.html
<ion-view title="Reporting">
<ion-nav-bar class="bar-balanced">
<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-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>
mediatheque.html
<ion-view title="Mediatheque">
<ion-nav-bar class="bar-energized">
<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-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>
offreSFR.html
<ion-view title="Offre SFR" cache-view="false">
<ion-nav-bar class="bar-royal">
<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-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>
FAQ.html
<ion-view view-title="FAQ">
<ion-nav-bar class="bar-calm">
<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-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>
I'm trying to use Ion-infinite-scroll inside ion-side-menu, the fetch more function is not being called.
Is it possible to use ion-infinite-scroll inside ion-side-menu?
I added the directive, but the method "loadMore()" is not being called.
This is the line I use:
<ion-infinite-scroll on-infinite="loadMore()" ng-if="true" distance="10%"></ion-infinite-scroll>
and this is the loadMore() method:
$scope.loadMore = function() {
console.log("showMore");
};
The complete html is :
<ion-side-menus enable-menu-with-back-views="true" cache-view="false">
<ion-side-menu-content ng-class="{'opaque-content' : isMenuOpen}">
<ion-nav-bar class="bar-stable">
<ion-nav-buttons side="left">
<button class="button button-icon" menu-toggle="left">
<img class="menu-icon" src="img/menu-icon.png" />
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<div class="button-icon">
<img ng-show="showUserImage" class="default-channel-image" src="img/default-channel.png" />
<img ng-show="showAnonymouseChannel" class="discussion-title-image img-border" src="img/anonymous-icon.png" />
</div>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" width="320">
<ion-header-bar class="bar-stable menu-background">
<a class="setting-icon-wrapper" href="#/app/preferences" menu-close>
<img class="settings-icon" src="img/settings.png" />
</a>
<form class="search-input-wrapper" ng-submit="search(discussionFilter.data)">
<input type="text" id="searchFilter" class="search-input" ng-model="discussionFilter.data" placeholder="Find channels..." ng-change="changeSearch(discussionFilter.data)" ng-model-options='{ debounce: 1000 }'/>
<div ng-hide="discussionFilter.data != null && discussionFilter.data != ''" class="search-icon-wrapper" ng-click="search(discussionFilter.data)">
<i class="fa fa-search fa-2 search-icon"></i>
</div>
<div ng-show="discussionFilter.data != null && discussionFilter.data != ''" class="clear-search" data-ng-click="discussionFilter.data = '';search(discussionFilter.data)">
<img src="img/clear-results.png" class="clear-results">
</div>
</form>
</ion-header-bar>
<ion-header-bar class="bar-subheader channels-header short-header" ng-show="discussions.length > 0" ng-class="">
<div class="list-items-header channels-header" ng-show="discussions.length > 0">
<p class="list-header-title">CHANNELS</p>
<div class="create-channel-area" ng-click="MoveToNewChannel()" menu-close>
<img class="plus-icon" src="img/plus-button.png"/>
</div>
</div>
</ion-header-bar>
<ion-content class="channel-headers menu-background" ng-show="discussions.length > 0" ng-click="closeKeyboard()">
<ion-list class="menu-background menu-list" ng-click="closeKeyboard()">
<ion-item class="menu-background" menu-close ng-href="#/app/discussion/{{discussion.id}}" ng-click="closeKeyboard()" ng-repeat="discussion in discussions">
<div class="menu-channel-text" ng-class="{'subject-regular' : discussion.read}"> {{discussion.subject | truncate_word:18}} </div>
</ion-item>
</ion-list>
<!--<ion-infinite-scroll on-infinite="loadMore()" immediate-check="false" ng-if="isMenuOpen && showMoreDiscussions" distance="10%"></ion-infinite-scroll>-->
</ion-content>
</ion-side-menu>
</ion-side-menus>
The solution was:
Added $scope.$broadcast('scroll.infiniteScrollComplete'); to the end of my loadMore function.
I have twitter share button in my app.
After sharing with twitter (popup appears) or even cancel, one of my buttons -- logout button stop working.
Buttons are very simple:
<ion-item ng-click="vm.gotoMyRewards()" class="item">
<span class="item-icon"><i class="fa fa-shopping-cart"></i></span>
<span class="item-text ng-binding">My Rewards</span>
</ion-item>
<ion-item ng-click="vm.gotoMyPoints()" class="item">
<span class="item-icon"><i class="icon ion-stats-bars"></i></span>
<span class="item-text ng-binding">My Points</span>
</ion-item>
<ion-item ng-click="vm.gotoPartnerCenter()" ng-show="vm.user.IsMerchant" class="item ng-hide" style="">
<span class="item-icon"><i class="fa fa-shopping-cart"></i></span>
<span class="item-text ng-binding">Partner Centre</span>
</ion-item>
<ion-item ng-click="vm.gotoSettings()" class="item">
<span class="item-icon"><i class="fa fa-cog"></i></span>
<span class="item-text ng-binding">Settings</span>
</ion-item>
<!-- ngIf: vm.user.BugReportEnabled -->
<ion-item menu-close="" ng-click="vm.takeUserGuide()" class="item">
<span class="item-icon"><i class="icon ion-easel"></i></span>
<span class="item-text ng-binding">About</span>
</ion-item>
<ion-item menu-close="" ng-click="vm.openFAQ()" class="item">
<span class="item-icon"><i class="fa fa-life-ring"></i></span>
<span class="item-text ng-binding">Help</span>
</ion-item>
<ion-item ng-click="vm.signOut()" class="item">
<span class="item-icon"><i class="fa fa-power-off"></i></span>
<span class="item-text ng-binding">Log Out</span>
</ion-item>
The last one is not working. And action behind not triggered:
vm.signOut = function () {
var confirmCallback = function(index){
//OK
if(index == 2){
appStateFactory.logOut();
}
};
messageService.confirm("Sign_out_confirm_message", [translate.get('Cancel_MA'), 'OK'], confirmCallback);
};