I am developing app in Ionic 2, and I want to display map in a modal. Problem is I can't get it to work. Same code works on normal page, but not in modal. I tried using web version of google maps API and even native cordova plugin, but result is the same, blank map in modal, working map on page. Any advice how to solve this?
You should set the underneath page to transparent.
Here is my working code for calling map modal
html
<ion-content [style.opacity]="isModal ? 0 : 1" padding>
<button ion-button item-right >
<ion-icon name="add" (click)="getLocation()"></ion-icon>
</button>
</ion-content>
typescript
getLocation() {
this.isModal = true;
let mapModal = this.modalCtrl.create(MapModalPage);
mapModal.onDidDismiss((data) => {
this.isModal = false;
if(data) {
this.location = data.location;
this.locImage = data.image;
}
});
mapModal.present();
}
Related
<ion-icon id= "list" name="list-sharp" onclick = "appear()"></ion-icon>
<ion-card id = "popup">
//other stuff
</ion-card>
appear(){
document.getElementById("popup").style.visibility = "visible";
}
The first part is in html the appear method is in typescript, and whenever i click on my list icon it gives me an error and says appear is not defined, anyone know why this is.
I'm following this angular recipes page for adding a modal dialog to my ui. It suggests the following markup, which I've added to one of my views.
... html for my view is here ...
<button class="btn" ng-click="open()">Open Modal</button>
<div modal="showModal" close="cancel()">
<div class="modal-header">
<h4>Modal Dialog</h4>
... etc, from the recipe doc
</div>
What I want to see is my view, plus an "Open Modal" button on the bottom and nothing else. What I see instead is the button and the content of the modal already visible on the page.
The very next words in the recipe doc are:
Note that even though we don’t specify it explicitly the modal dialog
is hidden initially via the modal attribute. The controller only
handles the button click and the showModal value used by the modal
attribute.
Why is my modal mark up initially visible on the page? I think I have installed angular-ui properly... in my index.html:
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
And in my app JS:
angular.module('MonteAdmin', [
...
'ui.bootstrap',
...
])
That recipes page is likely out of date. At the time of the writing it might have been possible to pass a variable showModal to the modal directive to reveal or hide it. In your controller, you would have been able to show the modal by setting the scope variable showModal to true or false:
$scope.showModal = false;
$scope.open = function() {
$scope.showModal = true;
}
The current version does not work that way. You will have much better experience if you read the official documentation for the library at Angular UI Bootstrap
If you are using the latest version of the library, the directive is no longer modal but uib-modal. In addition, you have a bit more work to do to implement your modal.
Modal markup should be in a script tag, with a type set to text/ng-template as per the official example:
<script type="text/ng-template" id="stackedModal.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title-{{name}}">The {{name}} modal!</h3>
</div>
<div class="modal-body" id="modal-body-{{name}}">
Having multiple modals open at once is probably bad UX but it's technically possible.
</div>
</script>
To actually open the modal, your button click should trigger the following example function:
var modalInstance = $uibModal.open({
animation: $ctrl.animationsEnabled,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
controllerAs: '$ctrl',
size: size,
appendTo: parentElem,
resolve: {
items: function () {
return $ctrl.items;
}
}
});
You must also define a controller for the modal, itself:
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance, items) {
var $ctrl = this;
$ctrl.items = items;
$ctrl.selected = {
item: $ctrl.items[0]
};
$ctrl.ok = function () {
$uibModalInstance.close($ctrl.selected.item);
};
$ctrl.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
All of this code is found on the official documentation for Angular UI Bootstrap
I have an Ionic 2 app that uses both a sidebar and tabs.
I have managed to create a link in the sidebar that sends the user back to the root page, but this kills the tabs. I would like the tabs to be persistent.
Here is what I have:
app.html
`<ion-menu [content]="content">
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<ion-item (click)="openPage(page)" *ngFor="let page of pages">
<span>{{page.title}}</span>
</ion-item>
</ion-list>
</ion-content>
<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>
Then in my app.ts I have this function:
openPage(page) {
this.menu.close();
this.nav.setRoot(page.component);
}
So this does actually work, but I lose my tabs. Is there a better way to do this?
this.nav.setRoot(TabsPage);
TabsPage is the class name of your tabs page's component.
You could reference the ionic-conference-app. It works for me.
openPage(page){
this.menu.close();
let params = {};
if (page.index) {
params = { tabIndex: page.index };
}
if (this.nav.getActiveChildNavs().length && page.index != undefined) {
this.nav.getActiveChildNavs()[0].select(page.index);
} else {
this.nav.setRoot(page.name, params).catch((err: any) => {
console.log(`Didn't set nav root: ${err}`);
});
}
}
I'm developing an mobile application using ionic. In this I'm trying to implement the delete feature like this :
As we see there is icon on left-side of the every list item, when clicked on that icon, list transitions to left-side and delete button gets displayed on the screen.
I want to implement the same feature..But not able to write the right CSS. Please guide me how should I make this work.
Here is the link to my plunkr
You can use ionic list directive.
<ion-list ng-controller="MyCtrl"
show-delete="shouldShowDelete"
show-reorder="shouldShowReorder"
can-swipe="listCanSwipe">
<ion-item ng-repeat="item in items"
class="item-thumbnail-left">
<img ng-src="{{item.img}}">
<h2>{{item.title}}</h2>
<p>{{item.description}}</p>
<ion-option-button class="button-positive"
ng-click="share(item)">
Share
</ion-option-button>
<ion-option-button class="button-info"
ng-click="edit(item)">
Edit
</ion-option-button>
<ion-delete-button class="ion-minus-circled"
ng-click="items.splice($index, 1)">
</ion-delete-button>
<ion-reorder-button class="ion-navicon"
on-reorder="reorderItem(item, $fromIndex, $toIndex)">
</ion-reorder-button>
</ion-item>
</ion-list>
Controller:
app.controller('MyCtrl', function($scope) {
$scope.shouldShowDelete = false;
$scope.shouldShowReorder = false;
$scope.listCanSwipe = true
});
I want to know how to open popup window in angularjs with simple animation and background should be blur or dark
and how to pass object to that new popup window
in html
I have this type div
<div class="col-xs-7 col-md-2 rcorners2 " style="height:168px;width:126px; margin-left: 10px" ng-click="clickevent(app)">
app.js I have this:
app.controller('test',['$scope',function($scope){
$scope.clickevent=function(app){
$scope.app=app;
alert(app.name);
}
}]);
this app object content different attributes app name description...
those attribute should display in that new popup window with button
how can I do this?
Wayne suggested ngDialog which is an option but I found it to be really annoying... I simply go with the bootstrap modal or ui.bootstrap $modal... ui.bootstrap just use $modal...
you can use $modal
ref: https://angular-ui.github.io/bootstrap/
app.controller('yourController', yourController);
yourController.$inject = ['$scope', '$modal'];
function yourController($scope, $modal){...}
then start to use it.
use javascript:
assign an object to window
const pageInfo = {
name: 'myPage',
url: 'http://myPage...'
}
window.pageInfo = pageInfo;
window.open(pageInfo.url, "_blank");
then check window.opener on the next page
if (window.opener && window.opener !== null) {
console.log('has initial pageInfo !');
let pageInfo = window.opener.pageInfo;
} else {
console.log('No initial pageInfo !');
}