I'm very new to using ionic/AngularJS and I was wondering how exactly to use ionic.Platform to print the current device. Right now I have
var currentPlatform = ionic.Platform.platform();
in my main.html ctrl. Is there a way to send it to the html page, or am I approaching it completely wrong?
from your controller data send to view use application model $scope , means just assign your variable to scope variable and get it directly where you call your controller in view.
Example :
angular.module('scopeExample', ['ionic'])
.controller('MyController', ['$scope', function($scope) {
var currentPlatform = ionic.Platform.platform();
$scope.currentPlatform = currentPlatform;
}]);
and in view you access
<body ng-app="scopeExample">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content ng-controller="MyController">
{{currentPlatform }}
</ion-content>
</ion-pane>
</body>
For more details refer following links :
link1,link2 & link3 etc.
Hopes this will help you.
Related
I use Materializecss 0.100.2 and i need to open a modal on page load or document ready. But not work, it will be work only if i click on button, i don't know why.
The modal has class "open" but the modal have "display: none" and the div modal-overlay is hidden. It work but not completely.
jQuery(document).ready(function () {
jQuery('#modalInfo').modal();
jQuery('#modalInfo').modal('open');
});
This thing works with vanillaJS. You need to get the modal class using querySelector() and then pass it in M.Modal.init(), and with the help of this instance you can call open() method.
HTML -
<div class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
JS -
document.addEventListener('DOMContentLoaded', function () {
var Modalelem = document.querySelector('.modal');
var instanceModal = M.Modal.init(Modalelem);
instanceModal.open();
});
History and Home page are work fine but 'ng-click="toggleMenu()"' are not working so please help me
click event ng-click="toggleMenu()"is not working..
can anyone help me to solve it?
My code is,
<ion-tab title="History" icon-off="ion-document" icon-on="ion-document-text" href="#/tab/history">
<ion-nav-view name="tab-history"></ion-nav-view>
</ion-tab>
<a class="button" ng-click="toggleMenu()">More</a>
.controller('MoreCtrl', function($scope,$ionicSideMenuDelegate) {
$scope.toggleMenu = function()
{
alert('test toggle');
$ionicSideMenuDelegate.toggleRight();
};
})
I think controller are not required here . can you try this way.
<ion-tab title="More" icon-off="ion-ios-more-outline" icon-on="ion-ios-more" ng-click="toggleMenu()">
</ion-tab>
</ion-tabs>
.run(function($ionicPlatform,$state,$rootScope,$ionicActionSheet,$ionicSideMenuDelegate) {
$rootScope.toggleMenu = function() {
alert('test toggle');
$ionicSideMenuDelegate.toggleRight();
}
})
check this question please Ionic framework ion tabs not firing event
more information this link for demo
http://codepen.io/cfjedimaster/pen/iplCx
Please add your full html code. Have you correctly attached MoreCtrl to the DOM? Is your DOM in line with Ionic guidelines for $ionicSideMenuDelegate? I don't see the <ion-side-menus> tag for example, like below:
<body ng-controller="MoreCtrl">
<ion-side-menus>
<ion-side-menu-content>
Content!
<button ng-click="toggleRightSideMenu()">
Toggle Right Side Menu
</button>
</ion-side-menu-content>
</ion-side-menus>
</body>
I want to close modal ONLY when user clicks on close button. I know, how to do this in Bootstrap. Could you help with Materialize?
You can customize the behavior of Materialize modal using Options which can be found Here at the bottom of the page
change option dismissible to false (which by default in modal plugin is true) so modal only get closed when click on close button.
$('.modalselector').leanModal({
dismissible: false
);
Example Modal
$(document).ready(function(){
$('.modal-trigger').leanModal({
dismissible: false
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Close
</div>
</div>
You can close the modal with the following code:
$('#modalname').closeModal(); or $('#modalname').modal('close');
$(document).ready(function(){
$('#modal1').openModal({
dismissible:false
});
});
Try This It worked for me
Below code worked for me with materialize.css 1.0.0
$(document).ready(function(){
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems,{
dismissible:false
});
var singleModalElem = document.querySelector('#login-page');
var instance = M.Modal.getInstance(singleModalElem);
instance.open();
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div id="login-page" class="modal">
<form class="login-form">
<div class="row">
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input class="validate" id="nick_name" type="text">
<label for="nick_name" data-error="wrong" data-success="right">Nick Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
Entra
</div>
</div>
</form>
</div>
None of the methods worked for me. However, this did,
$('#modal1').closeModal({ dismissible: true});
The leanModal(), openModal(), and closeModal() all failed for me. Things must have changed since then. Instead:
$("#modal1").modal({
dismissible: false
});
or even just calling the modal a second time:
$("#modal1").modal();
Just set the data-backdrop property to static.
If you only want to insert button for closing the modal (sometime CSS conflict won't allow the modal to close) use this:
<span
class="modal-action modal-close"
style="float:right; font-size:30px;"
onclick="$('#myModal2').closeModal();"
>
X
</span>
Came across the need to do something similar and thought I'll share this for others who are looking for it too. I'm using Materialize 1.0.0 and none of the suggestions above worked for me. Basically, we want to be able to have control over the modal's 'dismissible' property and change it whenever we want, from wherever we want and it shouldn't matter if it is before or after the modal is open. The most elegant way I found was to do it this way. This will control the modal's behavior from disappearing when a user clicks outside of its area.
var m = M.Modal.getInstance(modal);
m.options.dismissible = true|false;
where the modal param is your modal div.
Hope that helps.
Pure JavaScript, this is the way.
The span element that will close the modal.
var span = document.getElementsByClassName("close")[0];
When you want to click the X to close the modal you can use this.
span.onclick = function() {
modal.style.display = "none";
}
If you are clicking outside of modal this will close the modal.
window.onclick = function(event) {
if(event.target == modal) {
modal.style.display = "none";
}
}
$(".modal4").addClass('modal-close');
Where modal4 is class of modal you want to close
In Vue Js, By using materialize-css package
Install package npm i materialize-css
import the package import M from 'materialize-css';
Attach the code below in your eventListener such as click
methods: {
closeMaterializeModal(){
var elem = document.getElementById("modal4");
var instance = M.Modal.getInstance(elem);
instance.close();
}
}
Below code worked for me.
$('#modal1').closeModal();
Reference: materializecss
Does anybody have any advice for fixing the problem of a modal appearing behind its backdrop?
So far, I have tried making sure I have all the necessary imports (including <paper-dialog-scrollable>).
I also tried a "hack-fix" (suggested by someone) involving setting z-index: auto in the css of paper-header-panel. Neither works.
It's worth noting that the <paper-dialog> tag works just fine. Until I add the modal attribute.
Any ideas?
Similar issues
Appearing around the internet are this issue report and this Stackoverflow question.
my-element.html
<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html" />
<link rel="import" href="../../../bower_components/paper-dialog/paper-dialog.html">
<dom-module id="example-element">
<template>
<!-- Dialog -->
<paper-dialog id="contactDialog" modal>
<h2>Login</h2>
<paper-dialog-scrollable>
<form id="contact-form" autofocus>
<paper-input autofocus id="name" label="Your Name"></paper-input>
<paper-input id="email" label="Email Address"></paper-input>
</form>
</paper-dialog-scrollable>
<div class="buttons">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-confirm>Accept</paper-button>
</div>
</paper-dialog>
<!-- Button -->
<paper-button id="login"
data-dialog="contactDialog"
on-tap="openDialog">Login</paper-button>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'example-element',
properties: {...},
openDialog: function(){
this.$.contactDialog.open();
}
});
})();
</script>
This is my solution:
openDialog: function(){
var body = document.querySelector('body');
Polymer.dom(body).appendChild(this.$.dialogId);
this.$.dialogId.open();
}
Special Note: This answer applies to those trying to implement a <paper-dialog modal> element inside a header element. Specifically, inside <paper-drawer-panel>.
Answer:
On this bug report rubenstolk provides a hack-fix as follows:
To implement #dhpollack's hack in a nice way, add this function to your custom element:
// https://github.com/PolymerElements/paper-dialog/issues/7
patchOverlay: function (e) {
if (e.target.withBackdrop) {
e.target.parentNode.insertBefore(e.target.backdropElement, e.target);
}
},
And add on-iron-overlay-opened="patchOverlay" to all your <paper-dialog>'s
I have tested it and verifies that it works. So for now, that solves it. Therefore, I suppose it is sufficient for now to wait until the bug is fixed.
It wasn't quite clear from the screenshot, but the problem is your modal dialog appears behind the <paper-drawer-panel>, yes?
If so, I believe the solution is the same here: just place the dialog or custom element containing the dialog outside of the <paper-drawer-panel>, e.g.:
<paper-drawer-panel>
<paper-header-panel drawer>
<paper-toolbar>
<div>Drawer</div>
</paper-toolbar>
<paper-menu selected="{{_selected}}">
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
</paper-menu>
</paper-header-panel>
<paper-header-panel mode="standard" main>
<paper-toolbar>
<h1>[[_selected]]</h1>
</paper-toolbar>
<neon-animated-pages selected="{{_selected}}">
<paper-button raised on-tap="openDialog">Show Dialog</paper-button>
<div>Div</div>
</neon-animated-pages>
</paper-header-panel>
</paper-drawer-panel>
<example-element id="dialog"></example-element>
Here is a screenshot illustrating this:
I want to only hide the P0 paragraph using childNodes[x] . I wonder how it works because it hides the whole div with in this code:
<html>
<body>
<div id="myDiv">
<p>P0</p>
<p>P1</p>
</div>
<button onclick="hideFn();">hide</button>
<script>
function hideFn()
{
document.childNodes[0].childNodes[1].childNodes[1].style.display = "none";
}
</script>
</body>
</html>
</html>
You easily could have found the reason yourself by simply doing the traversal step by step:
document
the document
.childNodes[0]
the documentElement, also known as the root node (<html>)
.childNodes[1]
the <body>
.childNodes[1]
the <div>