7

Is there a good angular way to detect window focus? I am using html5 notifications and I would like to only fire if the window is out of focus.

Thanks!

4 Answers 4

5

There's a built-in angular directive ngFocus here maybe it helps if you attach it to the body

<window, input, select, textarea, a
  ng-focus="">
...
</window, input, select, textarea, a>

Edit: For window focus, there's the $window wrapper and you can do something like:

 $window.onfocus = function(){
   console.log("focused");
 }
8
  • How do you attach it to the body element? Do you have a separate controller owning the body tag?
    – fotoflo
    Jan 5, 2015 at 23:41
  • Hm I guess it depends on how your layout is structured now. I have the ngApp attached to <html> and ngController attached to <body>. Can you try and do that? You can add ngFocus on the <body>, also. If not, I guess you can attach it to some sort of wrapper/main content <div> that covers the whole surface. I also added a ng-controller="RootCtrl" to the index.html file for occasions like these. TL;DR yes Jan 5, 2015 at 23:46
  • Hmm, my ng-controller="layoutController" is on a div directly inside my body tag, but i added ng-focus="focus()" and a $scope.focus method inside my layout controller and no luck. i also tried moving the layoutController and the ng-focus directive to the body tag and no luck... maybe im doing something wrong?
    – fotoflo
    Jan 6, 2015 at 0:27
  • maybe you need something like blur instead of focus then? What version of angular are you using? Jan 6, 2015 at 0:41
  • had blur and focus on the element: ng-focus="focus()" ng-blur="blur() -- using 1.3.7 -- to be clear, your solution works for you when you open a different browser tab and click back? and also enter a different application and return to your browser?
    – fotoflo
    Jan 6, 2015 at 0:43
5

Edit @CristiBerceanu is right - you should use the built-in ng-focus directive. However, take this answer as a guideline for any missing event you want to bind.

You must create a directive:

angular
  .module('MyModule', [])
  .directive('onFocus', function(){
    return {
        restrict: 'A',
        scope: {
            'focus': '&onFocus'
        },
        link: function($scope, $element, $attributes) {
            var focus = function(event) {
                $scope.focus({'$event': event});
            };
            $element.on("focus", focus);
            $scope.$on('$destroy', function(){
                $element.off('focus', onClick);
            });
        }
    }
});

Notice how the event is bound in the directive by jquery and NOT directly in the controller. Additionally, notice that a bound expression is tied using the & prefix (evaluable expression binding) instead of regular prefixes like @ (text-binding) or = (scope property reference, bi-directional, binding).

4

In Cristi Berceanu's answer, he suggests assigning a function to $window.onfocus, which does work. However, there is a problem with that... only one function can be assigned to $window.focus at a time. Thus, by assigning a function to $window.onfocus, you could accidentally overwrite a previous function, and your function will be vulnerable to being overwritten later, too.

Here's a different solution that allows multiple functions to run with the window's focus or blur events:

var onFocus = function () {
    // do something
};

var onBlur = function () {
    // do something else
};

var win = angular.element($window);

win.on("focus", onFocus);
win.on("blur", onBlur);

This will allow you to assign multiple functions to the focus and blur events for the $window object.

If you added the functions inside a controller and want to remove those functions when the controller is destroyed, you can do something like this:

$scope.$on("$destroy", function handler() {
    win.off("focus", onFocus);
    win.off("blur", onBlur);
    $interval.cancel(interval);
});

Solution inspired by this post: https://www.bennadel.com/blog/2934-handling-window-blur-and-focus-events-in-angularjs.htm

1

you can write a directive to attach to the body element and inside it you can use $window.onfocus event to notify your angular app using events or a service, the same thing you can do from inside a service, it all depends on your architecture

0

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.