angular指令中的窗口级事件没有按预期执行

Window level events in angular directives are not executing as expected

本文关键字：执行 事件 指令 窗口 angular      更新时间：2023-09-26

标题可能令人困惑。请查看下面的代码:

        //html    
    <div id="test1" test></div>
    <div id="test2" test></div>

      //module    
   var myApp = angular.module('app', []);
    
    myApp.directive('test', function () {
    
        return {
            
            link: function (scope,el,attr) {
                
                window.onbeforeunload = function () {
                    console.log("test1");
    
                }
            }
        };
    })

我已经定义了window.onbeforeunload事件回调函数。我对两个不同的DOM元素有相同的指令。当引发onbeforeunload事件时，它只执行一次。我认为它会执行两次，这样我就可以捕获元素级别的信息。但这并没有发生。它只在元素"test1"上下文中执行。也许我做错了什么。

window.onbeforeunload只能接受一个事件处理函数，因此每次分配一个新的事件处理函数时，都会删除现有的事件处理函数。解决这个问题的一种方法是"附加"到已经定义的函数(也改为使用$window服务以获得更好的可测试性)…

myApp.directive('test', function ($window) {
    return {
        link: function (scope, el, attr) {
            appendOnbeforeunload(function () {
                console.log(el.attr('id'));
            });
            function appendOnbeforeunload(fn) {
                var currentFn = $window.onbeforeunload;
                if (angular.isFunction(currentFn)) {
                    $window.onbeforeunload = function () {
                        currentFn();
                        fn();
                    };
                } else {
                    $window.onbeforeunload = fn;
                }
            }
        }
    };
});

JsFiddle

相关文章：