I'm creating an app and I added ion-footer-bar, the problem is that ion-footer-bar stay on top the ion-list on last record. Looking for any solution I found to use $scope.$broadcast('scroll.resize'); but it not solved my problem.
How could I solve this ?
Controller
var app = angular.module('starter');
app.controller('EmpresaCtrl', function($scope, $state, $ionicLoading, EmpresaAPIService, AppConstants, APP_MESSAGES){
$scope.moreData = false;
var offset = 0;
$scope.items = [];
$scope.loadMore = function(){
EmpresaAPIService.getAllEmpresas(offset)
.success(function(data){
if(data.result.length === 0){
$scope.moreData = true;
}else{
angular.forEach(data.result, function(empresa){
var image = empresa.Empresa.imagem;
empresa.Empresa.imagem = AppConstants.webServiceUrl + "/app/webroot/img/empresas/" + image;
$scope.items.push(empresa);
})
offset += 10;
}
$scope.$broadcast('scroll.infiniteScrollComplete');
$scope.$broadcast('scroll.resize');
})
.error(function(err){
$ionicLoading.show({ template: APP_MESSAGES.internetOut, noBackdrop: true, duration: 2000 });
});
};
$scope.getEmpresa = function(id){
var params = {id:id};
$state.go('tab.detalheEmp', params);
}
});
index.html
<body ng-app="starter" animation="slide-left-right-ios7">
<ion-nav-bar class="bar bar-header bar-assertive" align-title="center">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
<ion-footer-bar class="bar-dark" ng-controller="AnuncioCtrl">
<div ng-model="loading" ng-show="loading">
<img src="img/loading.gif" width="30" height="30">
</div>
<img ng-src="{{banner}}" style="max-width:100%;display:block;margin:0 auto">
</ion-footer-bar>
</body>
empresa.html
<ion-view view-title="Empresas">
<ion-content class="padding" has-footer="true" scroll="true">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="text" ng-model="pesquisar" placeholder="Pesquisa rápida...">
</label>
</div>
<ion-list>
<ion-item class="item item-thumbnail-left"
ng-repeat="item in items | filter:pesquisar"
type="item-text-wrap"
ng-click="getEmpresa({{item.Empresa.id}})" >
<img ng-src='{{item.Empresa.imagem}}'>
<div style="font-weight:bold;" class="item-text-wrap">{{item.Empresa.nome}}</div>
<div style="font-size:small" class="item-text-wrap">{{item.Empresa.tipo}}</div>
<div style="font-size:small">{{item.Empresa.endereco}}</div>
<div style="font-size:small">{{item.Empresa.telefone}}</div>
<a href="tel:{{item.Empresa.telefone}}" class="button button-small button-balanced icon ion-ios-telephone">
</a>
</ion-item>
<ion-infinite-scroll on-infinite="loadMore();" distance="1%" ng-if='!moreData'></ion-infinite-scroll>
</ion-list>
</ion-content>
</ion-view>
Solved the problem. It simple to solve. I add class on tag <ion-nav-view class="has-footer"> and works like charm.
Related
I am using Ionic & angular.js to create a cross platform application and I am not being able to fetch all the post from word-press using json offset parameter, it fetched only 10 post by default I am suing infinite scroll of Ionic and Angular.js functions to do so but not being able to fetch all the posts
#controller.js
angular.module('starter')
.controller('MenuCtrl', function MenuCtrl($http, $scope, $sce, $ionicScrollDelegate){
$scope.categories = [];
$http.get("http://bijay.sahikura.com/api/get_category_index/")
.then(function(returnedData){
$scope.categories = returnedData.data.categories;
$scope.categories.forEach(
function(element, index, array){
element.title = $sce.trustAsHtml(element.title);
});
console.log(returnedData);
},
function(err){
console.log(err);
});
$scope.doRefresh = function(){
$scope.recent_posts = [];
$http.get("http://bijay.sahikura.com/api/get_posts/")
.then(function(data){
console.log(data);
$scope.recent_posts = data.data.posts;
$scope.recent_posts.forEach(
function(element, index, array){
element.excerpt = element.excerpt.substr(0,100);
element.excerpt = element.excerpt + " ... पुरा पढ्नुहाेस";
element.excerpt = $sce.trustAsHtml(element.excerpt);
$scope.$broadcast('scroll.refreshComplete');
});
});
};
$scope.recent_posts = [];
$http.get("http://bijay.sahikura.com/api/get_posts/")
.then(function(data){
console.log(data);
$scope.recent_posts = data.data.posts;
$scope.recent_posts.forEach(
function(element, index, array){
element.excerpt = element.excerpt.substr(0,100);
element.excerpt = element.excerpt + " ... पुरा पढ्नुहाेस";
element.excerpt = $sce.trustAsHtml(element.excerpt);
});
});
**$scope.canLoadMore = function()
{
return true;
};
$scope.count=0;
$scope.loadMore = function(){
console.log($scope.count++);
$http.get("http://bijay.sahikura.com/api/get_posts/?offset= "+$scope.offset)
.then(function(data){
var newPosts = data.data.posts;
$scope.count_total = data.data.count_total;
newPosts.forEach(
function(element, index, array){
element.excerpt = element.excerpt.substr(0,100);
element.excerpt = element.excerpt + " ... पुरा पढ्नुहाेस";
element.excerpt = $sce.trustAsHtml(element.excerpt);
})
$scope.recent_posts.push.apply($scope.recent_posts, newPosts);
$scope.$broadcast('scroll.infiniteScrollComplete');
$scope.offset = +10 ;
})
};**
$scope.searchTextChanged = function(){
$ionicScrollDelegate.$getByHandle('mainScroll').scrollTop(true);
};
})
.controller('PostCtrl', function() {
//alert("hello!");
})
menucontent.html
<ion-view>
<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-buttons side="right">
<button class="button button-icon button-clear ion-heart">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-header-bar class="bar bar-assertive">
<div class="title"> <center>Hello</center> </div>
</ion-header-bar>
<div class="bar bar-subheader item-input-inset">
<label class="item-input-inset">
<i class="icon ion-ios-search placeholder-icon"> </i>
<input type="search" placeholder="Search..." ng-model="searchText" ng-change="searchTextChanged()"/>
</label>
</div>
<ion-content class="has-subheader" delegate-handle="mainScroll">
<ion-refresher
pulling-text="Update ..."
on-refresh="doRefresh()">
</ion-refresher>
<ion-list can-swipe="true">
<ion-item class="item item-thumbnail-left item-text-wrap item-icon-right" ng-repeat="post in recent_posts | filter: {title: searchText}">
<img src="{{post.thumbnail}}"/>
<h2>{{post.title}}</h2>
<p ng-bind-html="post.excerpt"> </P>
<ion-option-button class="button-dark">
<i class="icon ion-heart"> </i>
</ion-option-button>
</ion-item>
</ion-list>
<ion-infinite-scroll ng-if="canLoadMore()" on-infinite="loadMore()">
</ion-infinite-scroll>
</ion-content>
</ion-view>
I want to generate dynamic modals using Ionic, and have created a controller that dynamically has the id of the ng-repeat item which is linked to a unique modal. The modal is under a under the ion-item
Controller
$scope.showModal = function(id){
$ionicModal.fromTemplateUrl(id+'-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
window.modal.show();
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
}
View
< ion-item collection-repeat="hist in history" ng-show="history.length" style="background:none;border:none">
<div class="list card" ng-click="showModal(id)">
<div class="item ">
<div class="row" >
<div class="col col-25" > <span style="float:left;padding-top:0.4em"><i class="ion-clock largericon"></i></span> </div>
<div class="col col-75" align="left">
<div style="float:left">
<div style="font-size:2em">{{hist.session_time}} </div>
<div style="color:#999"> {{hist.human_date}}</div>
</div>
</div>
</div>
</div>
</div>
<script id="1-modal.html" type="text/ng-template">
<ion-modal-view style="background:#24112B">
<ion-header-bar class="bar bar-header bar-royal">
<h1 class="title">Session Started... </h1>
<button class="button button-clear button-primary" ng-click="modal.hide()"><i class="ion-close-round"></i></button>
</ion-header-bar>
<ion-content class="padding">
<div style="padding-top:1.3em;padding-bottom:1.3em">
<div class="row" align="center" >
<div class="col col-100" align="center">Start by keeping your repetitions to the beat...</div>
</div>
</div>
</ion-content>
</ion-modal-view>
</script>
</ion-item>
See it working: https://plnkr.co/edit/UcoU4i?p=preview
$scope.showModal = function(id){
$ionicModal.fromTemplateUrl(id+'-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
$scope.modal.show(); // show modal after it was loaded
});
}
EDIT: Also make sure ng-click="showModal(id)" you pass some actual id...
I have a view with one list item. After user clicked on this item, the modal form show. When user change value and close modal, the item-not not updating.
View:
<ion-view ng-controller="settingsController">
<ion-content>
<div class="list">
<ion-item class="item-icon-left" ng-click="openLanguageModal()">
<i class="icon ion-chatboxes"></i>
{{'Language'| translate}}
<span class="item-note">
<div ng-bind="choice"></div>
</span>
</ion-item>
</div>
</ion-content>
<script id="language-modal.html" type="text/ng-template">
<div class="modal">
<ion-header-bar>
<!-- <button class="button button-full button-dark" ng-click="closeLanguageModal()">{{'Done' | translate}}</button> -->
<button class="button button-clear button-positive pull-right" ng-click="closeLanguageModal()">
{{'Done' | translate}}
</button>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-radio ng-model="choice" ng-value="'en'"> English </ion-radio>
<ion-radio ng-model="choice" ng-value="'ru'"> Русский </ion-radio>
</ion-list>
</ion-content>
</div>
</script>
</ion-view>
Controller:
app.controller('settingsController', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('language-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.languageModal = modal;
})
$scope.choice = "en";
$scope.openLanguageModal = function() {
$scope.languageModal.show();
}
$scope.closeLanguageModal = function() {
$scope.languageModal.hide();
};
$scope.$on('$destroy', function() {
$scope.languageModal.remove();
});
});
I dont understand why the ng-bind didnt updates, help please
Try to use:
$scope.model.choice = "en";
in a main Controller (so that all other view controllers could inheritate this info).
and in all view (settings and language-modal) modify to:
ng-model="model.choice"
due to prototypal inheritance...
Here it is a working demo: http://codepen.io/beaver71/pen/XXaROB
I am just trying to follow this example.
Here is my code:
angular.module('starter.controllers', [])
.controller('PaymentListCtrl', function ($scope,$ionicModal,$timeout) {
$scope.firstName = "John";
$scope.productItems = [
{
name: 'Product 1',
price: '$50.00'
},
{
name: 'Product 2',
price: '$45.00'
}
];
$scope.message = 'Everyone come and see how good I look!';
$ionicModal.fromTemplateUrl('modal_transaction_code.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal
})
$scope.openModal = function() {
$scope.modal.show()
}
$scope.closeModal = function() {
$scope.modal.hide();
};
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
});
Modal Form
<label class="item item-radio" id="hashtagRadio" ng-controller="PaymentListCtrl">
<input type="radio" name="settings-group" value="search">
<div class="item-content">
<span class="ion-pound"></span> <span id="hashtagInput">MODAL FORM</span>
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
its simple..!
<body ng-app="starter" ng-controller="PaymentListCtrl">
<ion-pane>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-content>
<button
class="button button-full button-assertive"
style = "margin-top: 0px;"
ng-click = "openModal()">
Open modal
</button>
</ion-content>
</ion-pane>
</body>
</html>
<script id="modal_transaction_code.html" type="text/ng-template">
<ion-modal-view class="mdx-modal" >
<ion-header-bar class="dark">
<div class="title text-center">Hola</div>
<button class="button button-clear ion-close" ng-click="closeModal()"></button>
</ion-header-bar>
<ion-view>
<ion-content class=" content-stable" >
<label class="item item-radio" >
<input type="radio" name="settings-group" value="search">
<div class="item-content">
<span class="ion-pound"></span> <span >MODAL FORM</span>
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</ion-content>
</ion-view>
</ion-modal-view>
</script>
make sure, above code remains in same .html file
and PaymentListCtrl controller code is right..!
hope u make it..!
I'm writing a small ionic app and have an issue. I'm using a sidemenu and also tabs. I have an ionic slide-box in one of my views, when I wipe this slidebox from left to right the side menu slides out. I've read through various related topics on the ionic forum but none have worked.
I've tried adding drag-content="false" to various tags and also added $ionicSideMenuDelegate.canDragContent(false); to my controller.
Neither worked. I think it's because I'm using a sidemenu, with tabs and views in the tabs. Heres my code:
index.html
<ion-side-menus>
<!-- Header bar -->
<ion-side-menu-content ng-controller="NavCtrl" drag-content="false">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-icon ion-ios7-arrow-back">
</ion-nav-back-button>
</ion-nav-bar>
<!-- Page content -->
<ion-nav-view drag-content="false" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<!-- Side menu -->
<ion-side-menu side="left" class="side-menu">
<ion-header-bar class="bar bar-header bar-dark">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content has-header="true">
<div ng-if="authData.twitter" class="logged-in-user item item-avatar">
<img ng-src="{{authData.twitter.cachedUserProfile.profile_image_url}}"/>
<h2>Hello, {{authData.twitter.displayName}}</h2>
<p>Logged in via Twitter</p>
</div>
<div ng-if="authData.facebook" class="logged-in-user item item-avatar">
<img ng-src="{{authData.facebook.cachedUserProfile.picture.data.url}}"/>
<h2>Hello, {{authData.facebook.displayName}}</h2>
<p>Logged in via Facebook</p>
</div>
<ul class="list">
<li>
<a class="item item-icon-left" menu-close nav-clear href="#/venue">
<i class="icon ion-ios7-location"></i>Venue
</a>
</li>
<li>
<a class="item item-icon-left" menu-close nav-clear href="#/lunch">
<i class="icon ion-pizza"></i>Lunch
</a>
</li>
<li>
<a class="item item-icon-left" menu-close nav-clear href="#/wifi">
<i class="icon ion-wifi"></i>Wifi
</a>
</li>
</ul>
</ion-content>
<ion-footer-bar class="bar bar-dark">
<button class="button button-icon icon ion-log-out menu-close nav-clear" ng-controller="LoginCtrl" ng-click="logout()"> Logout</button>
</ion-footer-bar>
</ion-side-menu>
</ion-side-menus>
and my view:
<ion-view title="Agenda">
<ion-content drag-content="false">
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide>
<div class="header-card header-card--image">
<div class="overlay">
<div class="item item-text-wrap">
<h3 class="header-card__heading">Happening now</h3>
<img ng-src="img/me.jpeg" class="header-card__avatar"/>
<h2 class="header-card__heading">some guy</h2>
<p class="header-card__text">Some title</p>
</div>
</div>
</div>
</ion-slide>
<ion-slide>
<div class="header-card header-card--image">
<div class="overlay">
<div class="item item-text-wrap">
<h3 class="header-card__heading">Coming Next</h3>
<img ng-src="img/me.jpeg" class="header-card__avatar"/>
<h2 class="header-card__heading">Some guy</h2>
<p class="header-card__text">Slowly taking over the world</p>
</div>
</div>
</div>
</ion-slide>
</ion-slide-box>
<ion-list>
<ion-item ng-repeat="(id,agendaItem) in agendaItems" type="item-text-wrap" href="#/tab/agendaItem/{{agendaItem.$id}}" class="item item-avatar item-with-grid">
<img ng-src="{{agendaItem.image}}">
<p>{{agendaItem.startTime}} <i ng-if="agendaItem.hasNotificationSet == true" class="icon-left ion-ios7-bell"></i></p>
<h2>{{agendaItem.title}}</h2>
<p>{{agendaItem.speaker}}</p>
<ion-option-button ng-class="agendaItem.hasNotificationSet ? 'button-balanced icon ion-ios7-bell' : 'button-positive icon ion-ios7-bell-outline'" ng-controller="NotificationCtrl" ng-click="add(agendaItem)"></ion-option-button>
<!--<ion-option-button ng-click="getNotificationIds()"></ion-option-button>-->
</ion-item>
</ion-list>
</ion-content>
and my controller:
.controller('AgendaCtrl', function($scope, AgendaFactory, $ionicSideMenuDelegate, $rootScope, $ionicPopup, $timeout, $cordovaLocalNotification, NotificationFactory) {
$ionicSideMenuDelegate.canDragContent(false); // doesn't seem to work
var agendaItems = AgendaFactory.getAgenda();
// Loop through agenda itens and check which have notifications set
agendaItems.$loaded().then(function(array) {
angular.forEach(array, function(value, key) {
if (NotificationFactory.isNotificationScheduled(value.notificationId) == true) {
value.hasNotificationSet = true;
} else {
value.hasNotificationSet = false;
}
});
$scope.getNotificationIds = function () {
$cordovaLocalNotification.getScheduledIds().then(function (scheduledIds) {
console.log(scheduledIds);
});
};
$scope.agendaItems = agendaItems;
});
$scope.firstTimeLogin = $rootScope.firstTimeLogin;
})
I'm using something like this on my app:
.controller('AgendaCtrl', function($scope, $ionicSideMenuDelegate){
$scope.$on('$ionicView.enter', function(){
$ionicSideMenuDelegate.canDragContent(false);
});
$scope.$on('$ionicView.leave', function(){
$ionicSideMenuDelegate.canDragContent(true);
});
})
now, when you leave the view it's draggable again.
ion-side-menu-content drag-content="false" put this code in your ion-sidemenu's ion-pane tag
<ion-side-menus>
<ion-side-menu-content drag-content="false">
............
</ion-side-menu-content>
</ion-side-menus>
this is sample code follow #Chetan Buddh's answer