Question

检测窗口焦点是否有良好的角度方式？我正在使用html5通知，我只想在窗口失焦时触发。

谢谢！

Answer 1

编辑 @CristiBerceanu是对的 - 你应该使用内置的ng-focus指令。但是，请将此答案作为您要绑定的任何缺失事件的指南。

您必须创建一个指令：

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);
            });
        }
    }
});

注意事件如何通过jquery绑定在指令中，而不是直接在控制器中绑定。另外，请注意绑定表达式使用&前缀（可计算表达式绑定）而不是常规前缀（如@（文本绑定）或=（范围属性引用，bi-定向，绑定）。

Answer 2

内置角度指令ngFocus here如果将它贴在身体上可能有帮助

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

编辑：对于窗口焦点，有$window包装器，您可以执行以下操作：

 $window.onfocus = function(){
   console.log("focused");
 }

Answer 3

在Cristi Berceanu的回答中，他建议为$ window.onfocus分配一个函数，它确实有效。但是，有一个问题...一次只能为$ window.focus分配一个函数。因此，通过为$ window.onfocus指定一个函数，您可能会意外地覆盖以前的函数，并且您的函数也很容易被以后覆盖。

这是一个不同的解决方案，允许多个功能与窗口的焦点或模糊事件一起运行：

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

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

var win = angular.element($window);

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

这将允许您为$ window对象的焦点和模糊事件分配多个函数。

如果您在控制器中添加了这些功能，并希望在销毁控制器时删除这些功能，您可以执行以下操作：

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

受此帖子启发的解决方案：https://www.bennadel.com/blog/2934-handling-window-blur-and-focus-events-in-angularjs.htm

Answer 4

你可以编写一个附加到body元素的指令，在其中你可以使用$ window.onfocus事件通过事件或服务通知你的角度应用程序，你可以从服务内部做同样的事情，这一切都取决于在您的架构上

检测窗口焦点的角度方式？

4 个答案: