I am very new to angular JS and working on a mobile application. As a part of it, I need to write a service that handles touch events like swipe-left, swipe-right, swipe-up and swipe down and I need to call back depending on which action is made. Please let me know if there any useful tutorials.
As mentioned in the comments ngTouch is a good place to start, however it only has swipe left and swipe right. I recommend using Angular Gestures; it's an angular implementation of hammer.js, and has pretty much everything you'd ever need:
doubletap
dragstart
drag
dragup
dragdown
dragleft
dragright
dragend
hold
pinch
pinchin
pinchout
release
rotate
swipe
swipeup
swipedown
swipeleft
swiperight
tap
touch
transformstart
transform
transformend
Another option is the angular-swipe module. It replaces ng-swipe and uses the same directives, adding up and down:
ng-swipe-up
ng-swipe-down
ng-swipe-left
ng-swipe-right
In html i used 5 tabs and i am able to swipe left or right smoothly.
my code given below.
RECEIVED | SENT | DELETED | ARCHIVED Reports
In html
ng-swipe-left="leftTab()" ng-swipe-right="rightTab()"
and In controller.
$scope.leftTab = function(){
if($scope.tab != 4 ){
$scope.getAlertsSummary($scope.tab + 1);
}
};
$scope.rightTab = function(){
if($scope.tab != 0 ){
$scope.getAlertsSummary($scope.tab - 1);
}
};
Here getAlertsSummary used for get tab data.
Related
When I build the hybrid app using crosswalk - android Back button is not working with onsen ui framework(using angular js).
Below is the code which i have used...
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown() {
// Handle the back button
alert("Backbutton is pressed!");
var element = document.querySelector(".navigator-container");
var scope = angular.element(element).scope();
scope.popPage();
}
As #kabaehr mentioned you may need to wait for everything to be ready first. That means either of the following:
document.addEventListener('deviceready', function(){ ... });
ons.ready(function(){ ... });
The other thing which may be specific to Onsen UI is the fact that it's already doing some handling of that event, so you could try to use the API which is given for that.
Here are the docs for that API. Currently it seems like the method which you want is:
ons.setDefaultDeviceBackButtonListener(onBackKeyDown)
Although that method doesn't sound too nice so maybe the name will change in the future.
For now feel free to try if any of these options seem to work for you.
I want to be able to set a keyboard shortcuts for buttons in an application I'm building. I'd like to be able to pass in the keyboard button code as a parameter to make it configurable. Here's what I have so far using the documentation before I got stuck. HTML:
<div ng-controller="BtnCtrl">
<button class="primary-btn" type="submit" ng-keypress="press($event, '12')">Button</button>
</div>
JavaScript:
angular.module('App')
.controller('BtnCtrl', function ($scope) {
$scope.press = function($event, hotKeyRef) {
if ($event.keyCode==hotKeyRef) {
//need some code here to trigger the button press
}
}
});
So using my approach, I'm unsure of a) how to trigger the button press from inside the function and b) whether this is the correct way of passing in the keyCode data.
I might also be taking completely the wrong approach, so any other guidance would be appreciated.
Thanks
For the question a).
The main uses of a < button > html element is to fire an event on a click.
So if you want to use a keypress, why use this element ? I don't really see what you want to achieve. that seems controversal.
for b) :
By default, ng-keypress is intended to be used in an input element.
Otherwise, it seems that some posts, where I inquired, manage to make it work out.
You can see what it can look like, for example on this post (Is it possible to listen for arrow keyspress using ng-keypress?)
in which the person trying to setup the konami code.
Moreover, it seems that you can have trouble depending on which browser (Chrome, Firefox, Safari, IE) you uses. Be careful.
I hope this could help you.
hi there is an excellent plugin for your scenario u can check the below link
https://github.com/chieffancypants/angular-hotkeys/
u can also check the below stackoverflow link
What is AngularJS way to create global keyboard shortcuts?
I have some problems using Material Design Lite (getmdl.io). I followed the steps showed in the getmdl.io web in order to install it (actually I use bower), but I always have the same problem, when I change the ng-route in my web, some resources don't render properly, I need to reload the page to get it properly rendered, for example.
First I have this:
then when I reload, I get what I want:
What I cant understand is why other resources like google icons or buttons work correctly but the menu button on the nav bar and other resources like this one need to reaload the page in order to render properly.
I try to include the library using the hosted method and bower method.
Any idea what is going on?
i past in my code this function
angular.module('app', ['ngRoute']).
run(function($rootScope, xxxx, xxx){
$rootScope.$on('$viewContentLoaded', function(event, next) {
componentHandler.upgradeAllRegistered();
});
});
It worked perfect! Good luck..
Libraries like MDL work by waiting for the page to load using the DOMContentLoaded event, scanning the page for things like input elements and manipulating them with JavaScript so that they can inject the bits and pieces needed to work with their components. This works fine on static websites, but the DOMContentLoaded event only fires once, so when Angular performs a page transition, the DOM changes without MDL knowing about it.
Material Design Lite has a section in its FAQ about using MDL on dynamic websites:
Material Design Lite will automatically register and render all elements marked with MDL classes upon page load. However in the case where you are creating DOM elements dynamically you need to register new elements using the upgradeElement function. Here is how you can dynamically create the same raised button with ripples shown in the section above:
<div id="container"/>
<script>
var button = document.createElement('button');
var textNode = document.createTextNode('Click Me!');
button.appendChild(textNode);
button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
componentHandler.upgradeElement(button);
document.getElementById('container').appendChild(button);
</script>
Of course, this probably isn't terribly easy to do in your case, since you'd have to manually find each new element and call upgradeElement on it.
Usually, instead of doing this sort of event-based DOM manipulation, Angular uses directives to initiate DOM changes. Consider using a library built to interoperate with Angular, instead, such as Angular Material.
There are answers to this problem but they don't work on my current situation.
solution 1: resize.
google.maps.event.trigger(map, 'resize');
The resize redraws the map but it doesn't center, the center gets moved to the top left corner.
I tried to also put another event trigger like ...trigger(map, 'center') without success.
ng-if and refresh=true don't work at all, the map is not rendered as before.
other questions seem to be solved by using angular ui (not quite sure what they meant by this) but this is based in angular material.
Thanks to all for the help.
When using angular google maps 2.0.19 and angular material, a Google Map displays properly the first time it loads. But if the user clicks on a different state and then comes back, without reloading, of course, it only displays a corner of the original map.
Notice on the left the angular material look and on the right the empty space in darker gray, where the rest of the map should show.
The configurations is pretty vanilla:
<ui-gmap-google-map draggable="true"
pan="true"
zoom="map.zoom"
dragging="true"
center="map.center"
events="map.events"
control="map.control"
refresh="true">
And the loading from the controller also:
$scope.map = addressStore.setMap({lat: address.latitude,
lng: address.longitude});
//...also loads other parameters.
In a previous project had the same problem with Angular UI but got solved with this command at the begining of the controller:
google.maps.visualRefresh = true;
But then I moved to Angular Material in this app and the problem showed again.
Thanks in advance.
http://jsfiddle.net/9LuS2/
This code seems to work in modern browsers + IE8. But in IE7 (open up IE, hit F12 and do IE7 mode) the fiddle doesn't work at all, and in the actual page I am working on it doesn't work, but then if you click it, it appears, but then won't go away.
What is the best way to do a hover event with DIVs that will work going back to IE7.
Do I need to use JS?
If so can someone suggest either pure JS or YUI lib as I cannot use jquery for this project.
Yes, old IEs don't like .test:hover .test_hidden (selectors for inner elements of :hover).
If JS is an option, you can use the hover event in YUI:
YUI().use('node', 'event-hover', function (Y) {
var outer = Y.one('.test');
var inner = Y.one('.test_inner');
function showInnerDiv() {
inner.removeClass('test_inner_hidden');
}
function hideInnerDiv() {
inner.addClass('test_inner_hidden');
}
outer.on('hover', showInnerDiv, hideInnerDiv);
});