角度指令中的窗口级别事件未按预期执行

Question

Title may be confusing. Please find the code below: 

     //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”的上下文中执行。可能是我做错了什么。请输入任何内容..

Answer 1

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