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.
Related
In my ionic app,I have a feature where the user should see in app's nav bar horizontal dot lines,click on them and then a pop up menu should appear with two menu items(add to favorites and add a comment). The below picture illustrates my point.
The problem though is that those 3 horizontal dots don't appear in the nav bar of the app.
Here is the code for the ion-nav-button.
<ion-view view-title="News Details">
<ion-content>
<ion-nav-buttons side="secondary">
<div class="buttons">
<button class="button button-icon icon ion-more"
ng-click="openPopover($event)"></button>
</div>
</ion-nav-buttons>
<div class="card">
<div class="item item-body item-text-wrap">
<img class="full-image" ng-src="{{detailedNews.image}}" alt="Uthappizza">
<h3>{{detailedNews.title}}</h3>
<p>{{detailedNews.description}}</p>
</div>
</div>
<div class="row">
<div class="col col-offset-10">
<h4>Customer Comments
<small>Sort by:
<input type="text" ng-model="orderText">
</small></h4>
<ul class="list">
<li ng-repeat="comment in dish.comments | orderBy:orderText">
<blockquote>
<p>{{comment.rating}} Stars</p>
<p>{{comment.comment}}</p>
<footer>{{comment.author}}, {{comment.date | date:'MMM. dd, yyyy'}}</footer>
</blockquote>
</li>
</ul>
</div>
</div>
</ion-content>
</ion-view>
Maybe there is something wrong in this line.
<button class="button button-icon icon ion-more"ng-
click="openPopover($event)"></button>
Can you help me?
Thanks,
Theo.
Try wrapping the <ion-nav-buttons></ion-nav-buttons> directive inside an <ion-nav-bar></ion-nav-bar> directive and taking it out of ion-content.
<ion-view view-title="News Details">
<ion-nav-bar>
<ion-nav-buttons side="secondary">
<div class="buttons">
<button class="button button-icon icon ion-more"
ng-click="openPopover($event)"></button>
</div>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content>
...
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}}"
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'
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 am creating an app using ionic.
I have some buttons on the menu: messages, Settings, Help and Back.
I would like the back button does not appear on the dashboard page.
Anyone know how I do it? Thanks,
Ps .: I tried to use the ion-nav-back-button, but had some problems.
top menu
This is a menu.html
<ion-side-menus enable-menu-with-back-views="false" >
<ion-side-menu-content>
<ion-nav-bar class="bar-stable bar-balanced">
<ion-nav-buttons side="left">
</ion-nav-buttons>
<ion-nav-buttons side="right">
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
and this is a dashboard.html
<ion-view view-title="">
<ion-content class="padding">
<div class="list">
<div class="row">
<div class="col">
<span>Type your message:</span>
<div class="item-input item-stacked-label">
<textarea type="text"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col">
<span>Choose the distance:</span>
<div class="range range-balanced">
<input type="range" name="distance" min="1" max="10000" value="1000">
</div>
</div>
</div>
<div class="row">
<div class="col">
<span>Anexar imagem:</span>
<button class="button button-balanced button-full">Selecionar</button>
</div>
</div>
<div class="row">
<div class="col">
<a class="button button-icon icon ion-chevron-right float-right"></a>
</div>
</div>
</div>
</ion-content>
</ion-view>
Thanks!
What if you simply use ng-hide="homepage". Set $scope.homepage=true in the Homepage's controller. For other pages it will be undefined and therefore false so it won't be hidden.
dont know this is best way or not but its working for me..!try this.!
add this in controller related to sidemenu:
$scope.$watch(function () {
return $ionicSideMenuDelegate.getOpenRatio();
}, function (value) {
if (($state.$current.name == "app.dashboard")) {
$scope.hideButton = true;
}else{
$scope.hideButton = false;
}
});
html :
other way to do this is..:add whichever button u want in particular view and remove from sidemenu html.
<ion-view view-title="">
<ion-nav-buttons side="right">
</ion-nav-buttons>
<ion-content class="padding">
</ion-content>
</ion-view>
hope , it helps someone.!