I am building a Cordova/PhoneGap app. I am using Iscroll5 (https://github.com/mtr/angular-iscroll) for building a crossplatform pull-to-refresh feature. Seeing this example http://www.kamrat.com/test/iScroll5/iscroll5-pull-test.html, i want something similar but without using probe, as scrolling seems jumpy with this on. Is there any event or a way to know when the user preforms a touchend? Something like a beforeScrollEnd? Or is there a way to bind touchend to iscroll-element?
I been struggling for days to create this feature to work nicely but without any luck.
Simply add the touchend event to the HTML element, not the IScroll object.
So, if you have created your IScroll using
var scroll = new IScroll("#content");
Then just add your event like this:
document.getElementById("content").addEventListener("touchend", function () {
// do your refresh
}, false);
Related
I have a complicated setup. My application is driven by a set of "rules" which dictate what the user interface is. The UI is rendered by looping through the rules and creating the individual dropdowns. Initially, everything renders properly. However, once a user makes a change to the UI, other rules may be affected. In my application, an api call is made, which then returns a modified set of rules. In the attached plunker, I've simplified things such that only the new set of rules is applied, which causes the page to re-render. The problem is that my users would like to be able to tab between all of the entries on the page and make changes. However, once the page is re-rendered, the currently selected page element is now gone nothing has the focus. I've tried to put the focus back on the proper element by tracking a common Id, but to no avail.
Using either of these doesn't seem to work.
var el = document.getElementById(focusId);
el.focus();
angular.element(el).focus();
I've also tried using the autofocus attribute on the dropdown that I want to have focus, but that didn't work either. I'm using angularjs 1.2. Any ideas are appreciated.
http://plnkr.co/edit/ND9PKqULIOlixWR4XChN?p=preview
If you want to assign auto focus dynamically to a element on the DOM from angular you can use this:
var myEl = angular.element(document.querySelector('select'));
myEl.attr('autofocus',"attr val");
You can also pass in an id like: angular.element(document.querySelector('#focusId'));
You can look here for a prior answer which may be of some more help!
-Cheers!
Problem here is, you are trying to focus the element before the blur event completes. So you need to execute the focus code after blur event. Async execution of your focus code would solve the problem. You can use either setTimeout or $timeout.
setTimeout(function(){
angular.element('#'+focusId).focus();
/* //or
var el = document.getElementById(focusId);
el.focus();
*/
});
or
$timeout(function(){
angular.element('#'+focusId).focus();
/* //or
var el = document.getElementById(focusId);
el.focus();
*/
});
dont forgot to inject $timeout to your controller if you are using second code. Hope this helps :)
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'm using angularjs WITHOUT jquery, and trying to create scroll event listener.
tried this approach:
$rootScope.$watch(function() {
return $window.scrollY;
}, function(n,o) {
console.log('scroll');
});
but it dosen't work..
I managed to achieve this goal using this technique to create resize listener:
$rootScope.$watch(function() { // Listens to window size change
return $window.innerWidth;
}, function(n, o) {
console.log('resize');
});
is there a proper way to create pure angularjs scroll listener?
creating scroll event listener, 'The Angular Way', is actually very simple, using $window:
$window.onscroll = function() {
console.log('scroll');
};
try using onscroll event of javascript
Yes. your correct AngularJs provide $anchorScroll to scroll across the page but not that much effective. You can either go top or bottom like this. If you want scroll at particular position across vertical or horizontal $anchorScroll doesn't have that option. You have to go for normal javascript even for animation also. If you would like to explore more in Angular Scroll please have a look at this answer. Grate!!
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.
I am using Jquery plugin http://timeago.yarp.com/ for showing time.
Issue is timeago will not take effect for dynamically generated items.
$(document).ready(function() {
$(".timeago").timeago(); // works perfectly fine for the items which are loaded on page load
//$(".timeago").live(timeago()); // gives me an error ie timeago is not defined
//$(".timeago").live($(".timeago").timeago()); // gives me an error too much recursion.
jQuery.timeago.settings.allowFuture = true;
});
From some google search I got to know something ie:
Using live is the same as using bind, except that it is limited only to the events click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup.
Now how can do it cause I dont have any click event? How can I bind this?
.live() and .bind() assign callbacks to event. In your case, you don't have an event to assign the function to and so it fails.
You can, in theory, assign your callback to a custom event. You will however have to manually trigger the event (using .trigger()) whenever your item is generated. For example:
$("abbr.timeago").live("timeago", function() {
$(this).timeago();
});
// ... and in the bit that generates your item
$new_item.trigger("timeago")
Demo: http://jsfiddle.net/ZjuW4/9
Of course, using .live() in this situation is purely academic and does not really serve a good purpose.
If you do have access to the code that's generating the items, you can simply chain in the call to .timeago() as the items are generated, i.e. http://jsfiddle.net/ZjuW4/3/
take a look in this topic
here was discussed how to put timeago on dynamically loaded items
for example the results of an ajax request.
Activate timeago on newly added elements only
PS: allowFuture does not have anything to do with putting timeago on newly created items on your page. it just allows dates in the future (f.e. "in 3 days", "next week")