Generate dynamic Modals using Ionic - angularjs

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...

Related

ng-bind not updating after closing modal form

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

ion-footer-bar stay on top ion-list?

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.

Ionic: Can ready property 'show' error when trying to open modal form

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..!

Popover in ionic not working but runs fine in Codepen

I am trying to implement the $ionicPopover but for some reason it won't work in my project. But when I run it in Codepen it does. Anybody can tell me why?
My html code:
<div ng-controller="SettingsCtrl">
<ion-view view-title="Instellingen">
<ion-content >
<div class="padding">
<p class="textContact">Title</p>
<p class="textContact">Title 2</p>
</div>
<div>
<p class="textContact" ng-click="openPopover($event)">Taal</p>
</div>
</ion-content>
<script id="popover.html" type="text/ng-template">
<ion-popover-view>
<ion-content>
<div class="list">
<a class="item">
Lorem Ipsum
</a>
</div>
</ion-content>
</ion-popover-view>
</script>
</ion-view>
</div>
My controller code:
angular.module('ChemicarSettings.controllers', [])
.controller('SettingsCtrl', function($scope, $ionicPopover){
$scope.openPopover = function ($event) {
$ionicPopover.fromTemplateUrl('popover.html', {
scope: $scope
}).then(function(popover) {
$scope.popover = popover;
$scope.popover.show($event);
});
};
})
How about checking the app.js? Did you add the ChemicarSettings.controllers to the angular.module line in the app.js? For instance..
angular.module('ChemicarSettings', ['ionic','ChemicarSettings.controllers'])
Also add "ionic" in the first line of the ChemicarSettings.controllers:
angular.module('ChemicarSettings.controllers', ['ionic'])

Closing all open Bootstrap modals in AngularJS?

I have created a modal that opens another modal. I want to use the second modal as a confirmation box to close the first one. I cant get it to close both modals when I click ok on the confirmation box (the second modal).
Tree.html:
<script type="text/ng-template" id="tree_item_renderer.html">
<div class="bracket-match" ng-class="match.tier == 1 ? 'bracket-match-final' : ''">
<p ng-show="match.tier == 1" class="finale-title">Finale</p>
<div class="match-content">
<div class="player-div">
<div class="bracket-player-1 bracket-player-1-tier-{{tierCount+1-match.tier}}">
<input class="input-player-1 input-player-name form-control" type="text" ng-model="match.player1" placeholder="Deltager 1">
</div>
</div>
<div class="player-div border-bottom">
<div class="bracket-player-2">
<input class="input-player-2 input-player-name form-control" type="text" ng-model="match.player2" placeholder="Deltager 2">
</div>
</div>
</div>
<div ng-show="match.tier == 1 && showthirdplace && tierCount >= 2" class="third-place" ng-model="thirdplace">
<p class="finale-title">3. plads</p>
<div class="match-content">
<div class="player-div">
<div class="bracket-player-1 bracket-player-1-tier-{{tierCount+1-match.tier}}">
<input class="input-player-1 input-player-name form-control" type="text" ng-model="match.player1" placeholder="Deltager 1">
</div>
</div>
<div class="player-div border-bottom">
<div class="bracket-player-2">
<input class="input-player-2 input-player-name form-control" type="text" ng-model="match.player2" placeholder="Deltager 2">
</div>
</div>
</div>
</div>
</div>
<div class="bracket-column">
<div ng-repeat="match in match.previousMatches" ng-include="'tree_item_renderer.html'" />
</div>
</script>
<script type="text/ng-template" id="tournament-tree.html">
<div class="row modal-footer-btns">
<button class="btn btn-primary" ng-click="ok()">GEM</button>
<button class="btn btn-warning btn-xs" ng-click="openAlertBox()" type="button" data-dismiss="modal">LUK, uden at gemme</button>
</div>
<div class="row" style="margin-bottom:15px;">
<a ng-click="addMatchTier()" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i></a>
<a ng-click="removeMatchTier()" ng-class="tierCount > 1 ? 'btn btn-primary' : 'btn btn-default'"><i class="glyphicon glyphicon-minus"></i></a><br />
</div>
<div class="row tournament-tree">
<div ng-repeat="match in finalMatch">
</div>
<div class="bracket-column">
<div ng-repeat="match in finalMatch" ng-include="'tree_item_renderer.html'"></div>
</div>
</div>
</script>
<script type="text/ng-template" id="openAlertBox.html">
<div class="modal-header">
<h3 class="modal-title"></h3>
</div>
<div class="modal-body"> </div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">Ja</button>
<button class="btn btn-warning" ng-click="cancel()">Annuller</button>
</div>
</script>
Categories.html:
<div class="row">
<div class="modal-header">
<h3 class="modal-title"></h3>
</div>
</div>
<div ng-controller="CategoriesController">
<a ng-click="add()" class="btn btn-tree btn-primary" style="margin-top:15px;">Tilføj hovedkategori</a>
<p ng-repeat="data in nodes" ng-include="'category_item_renderer.html'"></p>
<ng-include src="'Modules/TournamentTree/Tree.html'"></ng-include>
</div>
<script type="text/ng-template" id="category_item_renderer.html">
<div class="category-style">
<div class="push-cat-btn">
<a ng-click="add(data)" class="btn btn-primary btn-sm"><i class="glyphicon glyphicon glyphicon-plus"></i></a>
<a ng-hide="data.nodes.push()" ng-click="openTournamentTree(data)" class="btn btn-info btn-xs">Turnering</a>
</div>
</div>
<p class="push" ng-repeat="data in data.nodes" ng-include="'category_item_renderer.html'"></p>
</script>
<script type="text/ng-template" id="TournamentTreeModal.html">
<div class="modal-header">
<h3 class="modal-title"></h3>
</div>
<div class="modal-body">
<div class="include-tree" ng-include="'tournament-tree.html'"></div>
</div>
<div class="modal-footer">
</div>
</script>
TreeController.js:
angular.module('tournamentTree', ['ui.bootstrap']);
angular.module('tournamentTree').controller("TreeController", ['$scope', '$modal', '$modalInstance', 'guidGenerator', function ($scope, $modal, $modalInstance, guidGenerator) {
$scope.openAlertBox = function () {
var alertBoxInstance = $modal.open({
templateUrl: 'openAlertBox.html',
controller: 'TreeController',
scope: $scope,
size: 'xs',
resolve: {
}
});
};
$scope.ok = function () {
$scope.close();
$scope.$parent.close();
}
$scope.cancel = function () {
$scope.close();
$scope.$parent.dismiss('cancel');
};
categoriController.js:
angular.module('tournamentCategories').controller("CategoriesController",
['$scope', '$modal', 'guidGenerator', 'eventBus', domainName + "Service", 'TournamentCategoryModelFactory',
function ($scope, $modal, guidGenerator, eventBus, domainService, modelFactory) {
$scope.openTournamentTree = function () {
var modalInstance = $modal.open({
templateUrl: 'TournamentTreeModal.html',
controller: 'TreeController',
scope: $scope,
size: 'wide-90',
backdrop: 'static',
keyboard: false,
resolve: {
}
});
modalInstance.result.then(function (selectedItem) {
//$scope.selected = selectedItem;
}, function () {
//$log.info('Modal dismissed at: ' + new Date());
});
};
}]);
You can use $modalStack from ui.bootstrap to close all instances of $modalInstance
$modalStack.dismissAll(reason);
This is how i got it working in my project without using any factory or additional code.
//hide any open bootstrap modals
angular.element('.inmodal').hide();
I have a timeout function that emits logout as $rootScope.$emit('logout'); and the listener in my service is as follows:
$rootScope.$on('logout', function () {
//hide any open bootstrap modals
angular.element('.inmodal').hide();
//do something else here
});
If you want to hide any other modals such as angular material dialog ($mdDialog) & sweet alert dialog's use angular.element('.modal-dialog').hide(); & angular.element('.sweet-alert').hide();
I don't know if this is the right approach , but it works for me.

Resources