moribvndvs / ng-idle Goto Github PK
View Code? Open in Web Editor NEWResponding to idle users in AngularJS applications.
Home Page: http://hackedbychinese.github.io/ng-idle
License: MIT License
Responding to idle users in AngularJS applications.
Home Page: http://hackedbychinese.github.io/ng-idle
License: MIT License
I'm only seeing the IdleWarn event fired when idle expires and then when timeout expires. My impression was that this would fire every second during the timeout period?
I attempted to implement in plunker to give example code but doesn't seem to work at all there. I think it is a fairly good representation of what I am doing though. http://plnkr.co/edit/Tv1rmD?p=info
note: the header comment still references this as "* @Version v0.3.5"
I want to update countdown
variable on my scope (progressbar animation, like in the demo).
$scope.$on('IdleWarn', function(e, countdown) {
$scope.countdown = countdown;
});
However, the scope is not refreshed. I need to:
$scope.$on('IdleWarn', function(e, countdown) {
$scope.$apply(function() {
$scope.countdown = countdown;
});
});
in order to have scope refreshed properly. IMHO, events should be dispatched inside $apply
.
Tested on current master.
Is it possible to change ng-idle to use $interval instead of $timeout/$http? The current implementation breaks protractor tests. See:
and
It would be useful for this module to provide a way of automatically updating the document title when the user becomes idle or is timed out, and restore the original title when the user is active again.
Additional goals:
ng-idle
events and go.Error: [$injector:modulerr] Failed to instantiate module ngIdle due to:
Error: [$injector:nomod] Module 'ngIdle' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I have included ngIdle in karma.conf.js in this order
files: [
'app/bower_components/angular/angular.js',
'app/bower_components/angular-route/angular-route.js',
'app/bower_components/angular-touch/angular-touch.js',
'app/bower_components/angular-animate/angular-animate.js',
'app/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js',
'app/bower_components/angular-mocks/angular-mocks.js',
'app/bower_components/angular-resource/angular-resource.js',
'app/bower_components/revolunet-angular-carousel/lib/angular-mobile.js',
'app/bower_components/revolunet-angular-carousel/src/angular-carousel.js',
'app/bower_components/jquery/dist/jquery.js',
'app/bower_components/angular-cookies/angular-cookies.min.js',
'app/bower_components/ng-idle/angular-idle.min.js',
'app/bower_components/ng-grid/ng-grid-2.0.11.min.js',
'app/js//*.js',
'test/spec//*.js'
What is it that I am missing? Because all my other libraries are working correctly. If I remove ngIdle code then my karma/jasmine tests are passing but with this all of my 100+ testcases are failing and giving the above error.
Hi!
First that all, Let me tell you your work is awesome and I consider this as a great feature that deserve to be part of Angular itself.
I found this issue by leaving my Firefox open with the application running and blocking my windows session. I had set the timeout at 300 sec, when I got back and unlocked the session I noted the application was still running and not actions related idle was performed. I saw this happen in Ipad/Android as well when they become locked and unlocked next day :(
Is this a known issue already?
If not, let me know what information you need and how I can help, I will be glad to do so.
Thanks!
ngMin
is a grunt task used by angular-generator
in Yeoman to automatically decorate functions with injected dependencies during minification. I manually decorate with metadata using $inject
on $keepaliveProvider.$get
and $idleProvider.$get
. ngMin
has a bug where it doesn't handle the $inject
metadata approach and creates a problem.
I can make everyone happy, yeoman or otherwise, if I switch to the array-style metadata, which ngMin
will ignore.
Hi Mike,
I am using ng-idle with angular js version 1.2.16 in my application. It works fine on FireFox ,crome and Internet Explorer 9 ,10. But on window 7 Internet explorer 8. I am getting this error "Object doesn't support this property or method", does ng-Idle works on IE8 browser if yes can you please help me to resolve this issue.
Thanks,
Gaurav
I setup idleProvider to use keepalive. Once idle.watch is called, keepalive is called on the set interval, but based on the documentation keepalive should stop once idle.unwatch is called. That's not the behavior I am seeing. I see keepalive firing even after idle.unwatch.
Link to example if the issue: http://plnkr.co/edit/ic92ex6PAFf7jviXVmeP
The fix might be as easy as adding the following to idle.js (line 172) : stopKeepalive();
I'm using ng-idle on my tool "strichliste" (Demo here: http://demo.hackerspace-bootstrap.org/strichliste-web/). I'm rendering the index page with the following html snippet:
<li ng-repeat="user in users | filter:isActiveUser | orderBy:'name'" ng-click="userClick(user.id)" class="col-xs-2 panel panel-default" title="{{user.name}}">
<div class="name">{{user.name}}</div>
<div class="balance" ng-class="user.balance < 0 ? 'negative' : ''">{{user.balance | number:2}} {{currency}}</div>
</li>
My filter looks like this:
$scope.isActiveUser = function() {
// some code
};
I added some console.log for debug purpose to this function and figures out, that on every mouse move, click or scroll (maybe more events) the filter again is triggered for each entry.
ng-idle is configured like this:
if(settings.idleTimeout) {
app
.config(function($idleProvider) {
$idleProvider.idleDuration(Math.ceil(settings.idleTimeout/1000));
$idleProvider.warningDuration(1);
})
.run(function($rootScope, $idle, $location, locationService) {
$idle.watch();
$rootScope.$on('$idleTimeout', function() {
if($location.path() != '/') {
locationService.gotoHome();
}
});
});
}
If I comment $idle.watch(), the "problem" is gone, but the timeout doesn't work anymore - of course ;)
Is this intended behaviour? I think this reduces the performance of my angular app a lot
maths.
I tried to use the demo to check out the functionality but I'm not seeing a modal appear anywhere. I've tried with and without ad-block. I don't see any output in the console that would lead me to believe the site is malfunctioning. I'm using chrome Version 38.0.2125.101 m
Hi
I am using ng-idle in my project and everything worked great until i checked my unit tests.
All my test are failing since after adding 'ngIdle' in my app dependency my app is failing to load during Unit test.I am getting below Error
39m Error: [$injector:modulerr] Failed to instantiate module test due to:
TypeError: undefined is not a function
at F:/Projects/abc/client/app/Features/Pay/PayBeneficiary/PayBeneficiary.js:9:501
at Object.invoke (F:/Projects/abc/client/bower_components/angular/angular.js:3966:17)
at F:/Projects/abc/client/bower_components/angular/angular.js:3885:37
at forEach (F:/Projects/abc/client/bower_components/angular/angular.js:325:18)
at loadModules (F:/Projects/abc/client/bower_components/angular/angular.js:3872:5)
at Object.createInjector as injector
at Object.workFn (F:/Projects/abc/client/bower_components/angular-mocks/angular-mocks.js:2339:52)
My app.js
'use strict';
angular.module('test', [
'ngIdle',
'ngCookies',
'ngResource',
'ngSanitize',
'ui.router',
'dateRangePicker',
'ui.select',
'ngIdle'
])
.config(function ($idleProvider, $keepaliveProvider) {
$idleProvider.idle(5); // in seconds
$idleProvider.timeout(60); // in seconds
$keepaliveProvider.interval(20); // in seconds
})
.run(function($idle){
$idle.watch();
});
and in my Karma config
files: [
'client/bower_components/jquery/dist/jquery.js',
'client/bower_components/angular/angular.js',
'client/bower_components/angular-date-range-picker/build/angular-date-range-picker.js',
'client/bower_components/angular-mocks/angular-mocks.js',
'client/bower_components/angular-resource/angular-resource.js',
'client/bower_components/angular-cookies/angular-cookies.js',
'client/bower_components/angular-sanitize/angular-sanitize.js',
'client/bower_components/lodash/dist/lodash.compat.js',
'client/bower_components/angular-ui-router/release/angular-ui-router.js',
'client/bower_components/foundation/js/foundation.js',
'client/bower_components/foundation/js/foundation/foundation.reveal.js',
'node_modules/karma-jasmine-jquery/lib/jasmine-jquery.js',
'client/bower_components/angular-bindonce/bindonce.js',
'client/bower_components/moment/moment.js',
'client/bower_components/moment-range/lib/moment-range.js',
'client/bower_components/ng-idle/angular-idle.min.js',
'client/app/app.js',
'client/app/.js',
'client/components/.js',
'client/app/.html',
'client/components/.html',
],
If i remove ngIdle from app dependency all my test are passing.
am I missing something?
I even tried the ng-idle-test but it is throwing Error: [$injector:unpr] Unknown provider: $$qProvider <- $$q <- $interval <- $idle Error.
I am using angular 1.25 and jasmine 2.0
This directive can be used to easily copy the idle countdown value into the local scope for easy display. It should have just one scope value, a bidirectionally bound value that will receive the countdown value as it is updated.
Example:
<div ng-controller="DemoCtrl" ng-idle-countdown="countdown">
You will time out in {{countdown}} seconds.
</div>
Is $idleProvider
exposed so it could be used through injection? I tried injecting $idleProvider
(as well as $IdleProvider
- upper-case "I") but I keep getting:
Unknown provider: $idleProviderProvider <- $idleProvider
Is it even supposed to be exposed? Your getting started injects and uses it in .config()
For example, how do I access the autoResume()
function (am I even supposed to have access to that)?
Thanks
I'm trying to implement ng-idle instead of our homebacked solution, to logout users after 15 minutes of inactivity, but to send http pings if they are active.
It seems that it kinda works, as I send the logout command on $scope.$idleEnd
but it only happens when I'm active on the tab. It doesn't happen in background, for instance if I moved to another tab and waited there, the event won't seem to fire unless I come back to the tab.
Is this intended behavior? And if this is, how can I make ng-idle disconnect the user in background?
Reported by @brianfoody in https://github.com/brianfoody/Angular/blob/master/src/idle.js
It is suggested that we record a timestamp of when the last watch
was invoked, and have interrupt
trip the idle state if that time difference is greater than the idle timeout.
Hi
Here is two different plunkers with exact same code (only difference is ngIdle version) :
ngIdle v0.2.2 : http://plnkr.co/edit/71e1UUVshYbtGIr0UxxK?p=preview
ngIdle v0.3.5 : http://plnkr.co/edit/XnZmvm14Ez8Y756LfKBa?p=preview
In both plunk :
If you look at the console while moving the mouse on the page :
Am I missing something or is it a real problem ?
Thanks for this very usefull module anyway ;)
For now I'll just desactivate mousemove option
I am not clear on how am I supposed to manually reset the timer so it would postpone broadcasting of the $idleStart
event?
Am I supposed to use:
$idle.watch();
or
$idle.unwatch();
$idle.watch();
or
$idleProvider.keepAlive();
or
// this one would probably need to be used in combination with a
// broadcast listener and one of the mentioned above?
$keepalive.ping();
Sorry if you feel this is a dumb question, but I'm just not clear which one of these should I use to reset the timer? What are the differences between them?
Thanks in advance
My anticipation of setting autoResume to false and my desired effect would be to autoResume except when in a warn state. This would allow me to force the user to click a button to resume the application from the warn state and restart the $idle.watch(). I do not want to always prompt after the idleDuration expires nor do I want autoResume once warning has started. Perhaps I'm asking for an additional feature.
I do appreciate the work you have done and I would prefer to use your module without customizing your code. Hopefully I have not become a pest. Thanks,
Is there an easy and more official way for ng-idle to support one app opened on multiple tabs of the same browser?
here is one way http://stackoverflow.com/questions/23414691/ng-idle-issue-if-multiple-tabs-windows-are-opened-in-browser
In v0.3.5 the angularJS dependency for angularjs is ~1.2. This does not match 1.3, and should be updated to be >1.2.
So far enjoying the functionality this module is offering, but I'm having one problem.
I would like on the timeout modal for my users to be required to input their password. However, any user input while this modal appears releases them from an "idle" state.
I'd imagine what I want could be accomplished by setting activeOn(''), but I can't use this function outside of my module's config. Are there any workarounds for this?
Is it MIT?
Nice work by the way!
Thanks!
First I would like to say very nice work on this module!!! I love it so far and it is going to save me a lot of time. However, the latest release published is 0.3.5 in the release tab on GitHub, but also via installation with bower. I am confused because you have migration steps to use to get to version 1.0.0 in the Wiki, but I made the changes thinking I had version 1.0.0 but I did not. Why have migration steps for an unreleased version, I am missing something here?
I'm trying to update the idleDuration property on runtime but if I use the idleProvider dependency I have an error saying that idleProviderProvider does not exists, and if I inject '$idle', I don't have access to idleDuration property.
How is it doable?
I am using this module in our mobile. I have set timeout for 30seconds. Timeout alert appears even if user keeps scrolling for 30 minutes. And timeout alert doesn't hide if I scroll up/down during that time. Timeout alert disappears if only tap not scroll using swipe/drag gestures. Any help to this?
IdleEnd isn't broadcast anywhere, so the window title is never restored.
I have two desktop computers in my office, both running on the same operating system and same version of Google Chrome. When looking at the demo, computer 1 times out in 5 seconds as expected. However, computer 2 will not timeout unless the mouse is positioned outside of the window for 5 seconds. For computer 1, there is no need to move the mouse outside of the window for the $idleStart to kick in.
Any ideas on why we aren't seeing consistent functionality between the two computers?
I've noticed that keepAlive will only run while the user IS NOT idle.
What if I don't want that? What if what I want is to keep the browser session continuously while my angularApp is open?
Is there any way to do that?
More concise.
Once the timer starts, if we hit the home button and come back after a little while, the timer resumes from previous. It doesn't run in the background and doesn't send the idleTimeout.
I am getting this while using the min version BUT only in Firefox.
Error: angular-idle.min.js is being assigned a //# sourceMappingURL, but already has one
Typo in the condition check.
Is there a way to disable the timeout ("$idleTimeout" event)?
function timeout() {
stopKeepalive();
$interval.cancel(state.idle);
$interval.cancel(state.warning);
state.idling = true;
state.running = false;
state.countdown = 0;
$rootScope.$broadcast('$idleTimeout');
}
In my case I need to keep the ng-idle
watcher running forever (the only thing I actually need is the "$idleStart" event. So what happens is ng-idle
stops after some time. I can work around this by doing something like:
$rootScope.$on('$idleTimeout', function () {
$idle.watch();
});
but perhaps there is a better way to do this?
Thanks
As states in the angular Docs
Angular Prefixes $ and $$: To prevent accidental name collisions with your code, Angular prefixes names of public objects with $ and names of private objects with $$. Please do not use the $ or $$ prefix in your code.
To be less confusing, please choose a different "prefix" for all ng-idle stuff.
Hi,
I have the following scenario:
I use ngIdle as integral part of my session timeout management.
The user is considered idle if he doesn't navigate to another page or he doesn't do any API calls to the server.
On $idleWarn, we show a Noty notification which lets the user know how much time they have left before the session times out, and it allows for the user to extend the session. When they click on the Extend button, that calls $idle.watch() again which resets the counter.
All this works fine, so far.
Next step of the process is to make API call to refresh the token when the users chooses to extend the session. While the API call is in the middle of processing, the $idleWarning countdown continues.
Is there a way to pause and resume (with whatever time is left) the countdown?
I rather use $keepalive in some way to handle this, but I wasn't sure how to set it up so that it calls the API only when I tell it and not it be dependent on any timers.
Thank you much for your help
Stefan
How can I change idleDuration at runtime in a controller?
I can inject the $idle service like so:
.controller('EventsCtrl', function($scope, $idle)
Unforunately $idle does not have a property for changing the idleDuration.
After writing and having people start to use and discuss the module, certain terms became more natural to describe certain states, while others that I had been using sounded awkward or needed to be re-explained.
Everybody hates breaking changes, but I decided that with release 1.0.0, I would make those changes to normalize the vernacular across the board and just be done with it.
These are the methods that were changed on $idleProvider
:
idleDuration()
became idle()
warningDuration()
became timeout()
activeOn()
became interrupt()
Changes are already reflected in the wiki.
Hi,
Thanks for this great module!
I'm wondering if it's possible to detect if a user scrolls by clicking and dragging on the scrollbars?
When testing in Chrome, it doesn't.
Scrolling with mousewheel or touchpad, stops the Idle.
Best regards
Anders
Hi, Thanks for the ng-idle.
i am using it but dont know how to use it to sync up between different tabs. so, if user opens a page of my browser in different tab and uses it, my main page for example shouldnt timeout i.e. the reset of idle state by user action should propogate in other windows as well. i am not sure if angular will that or will i have to dive into core javascript?
I may be being an idiot here but I'm having problems where minifying angular-idle.js
seems to break it. I've used your own minified version and I'm still getting provider not found issues, which commonly occur when dependency notation fails.
I've put it into a plunkr for you though:
http://plnkr.co/edit/uaEOvD9hpUh1923ugJhH?p=preview
Open up your console to see:
Error: [$injector:unpr] Unknown provider: aProvider <- a <- $keepalive <- $idle
Change the script tag to include the uncompressed version and it'll work fine.
I was trying to disable the title service, but it wouldn't work even after adding idle-disabled="true"
.
Later i found that i had a image <img src="..." title="some title" />
, So the value idle-disabled="true"
was being overwritten later in the document.
It would be preferable to use tag name like idle-title to prevent conflicts.
Make it work from a single, simple npm install
command so contributors have less farting around to do.
Doing grunt bower-install
inserts both angular-idle.js and angular-idle.min.js, as they are both listed in bower.json's "main" configuration. I believe only the non-minified file should be injected, as it would be used for development anyway. For production, it would be uglified and minified through a build task.
This would be awesome if I could
bower install angular-idle
and boom! I have the angular-idle package
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.