Angularjs event when tab / browser is closed

Question

I have an angular application now i wish to log the user when he Login till he logout / closes the browser or nagivate to another site.

If the user press the logout button it is fairly easy however the problem occours when the user either closes the browser or nagivate to another site.

My question is how can i detect this in angular and fire an event when the user closes the brower/tab and / or changes webpage?

check this link http://stackoverflow.com/questions/19287644/running-a-method-on-browser-close-tab-or-browser-exit — Incpetor, Apr 22 '15 at 09:19

Nikhil Baliga · Answer 1 · 2015-04-22T16:46:30.690

0

There is an event onunload that gets called when someone is navigating away from that page

angular.element(document.getElementById('myDiv')).scope();
scope.my_function();

More Example

<div id="myDiv">
 <!-- some code here -->
</div>

<script>
....

angular.controller('MyController', ['$scope', function($scope) {
   $scope.my_function = function() {
      // Do something
   };
}]);   // End of controller

angular.element(document.getElementById('myDiv')).scope();
scope.my_function();

</script>

edited Apr 22 '15 at 16:46

answered Apr 22 '15 at 09:18

Nikhil Baliga

1,339
12
18

How do i access that? in angular? – Marc Rasmussen Apr 22 '15 at 09:19
One approach is - You can get access to scope and call scope functions. var scope = angular.element(document.getElementById('myDiv')).scope()l; scope.my_function(); – Nikhil Baliga Apr 22 '15 at 09:19
angular is javascript, so make sure you can access the function from outside the scope by calling the rootscope or something: http://stackoverflow.com/questions/20853142/trying-to-detect-browser-close-event here some examples. – Mathijs Segers Apr 22 '15 at 09:19
@NikhilBaliga The code you just provided i cant seem to see how this would fire onclose? – Marc Rasmussen Apr 22 '15 at 09:23
@NikhilBaliga How do i add this to my controller? i need to call an HTTP call from my controller to store the logout time – Marc Rasmussen Apr 22 '15 at 11:44
@MarcRasmussen The piece of code that I have mentioned above should be put outside your controller. The code within your controller that makes the http call, is called my_function in the example – Nikhil Baliga Apr 22 '15 at 16:43

score 0 · Answer 2 · edited May 23 '17 at 12:15

From the angular docs:https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$destroy

$destroy();

Removes the current scope (and all of its children) from the parent scope. Removal implies that calls to $digest() will no longer propagate to the current scope and its children. Removal also implies that the current scope is eligible for garbage collection. The $destroy() is usually used by directives such as ngRepeat for managing the unrolling of the loop. Just before a scope is destroyed, a $destroy event is broadcasted on this scope. Application code can register a $destroy event handler that will give it a chance to perform any necessary cleanup. Note that, in AngularJS, there is also a $destroy jQuery event, which can be used to clean up DOM bindings before an element is removed from the DOM.

Also refer this: fire angularjs event when tab/browser is closed

Angularjs event when tab / browser is closed

2 Answers2