$window.addEventListener 仅在第一次工作，但下一次在病房中无法通过 $watch 工作

Posted 2023-02-25

【中文标题】$window.addEventListener 仅在第一次工作，但下一次在病房中无法通过 $watch 工作

【英文标题】：$window.addEventListener is working only first time, but next time on wards not working through $watch

【发布时间】：2019-12-13 09:49:15

【问题描述】：

$window.addEventListener 只在第一次工作，下一次在工作灯 8 的 angularjs 中网络状态发生变化时，病房不工作

app.factory('onlineStatus', function($window, $rootScope) 
    var onlineStatus = ;

    onlineStatus.onLine = navigator.onLine;

    onlineStatus.isOnline = function() 
      return onlineStatus.onLine;
    ;

    $window.addEventListener("online", function() 
      onlineStatus.onLine = true;
      $rootScope.$digest();
    , true);

    $window.addEventListener("offline", function() 
      onlineStatus.onLine = false;
      $rootScope.$digest();
    , true);

    return onlineStatus;
);

$scope.onlineStatus = onlineStatus;
$scope.$watch('onlineStatus.isOnline()', function(online) 
    $scope.netStatus = online ? 'online' : 'offline';
);

【参考方案1】：

简化工厂：

app.factory('onlineStatus', function($window, $rootScope) 
    var onlineStatus = ;

    onlineStatus.onLine = $window.navigator.onLine;

    onlineStatus.isOnline = function() 
        return $window.navigator.onLine;
    ;

    $window.addEventListener("online offline", function() 
      onlineStatus.onLine = $window.navigator.onLine;
      $rootScope.$broadcast("onlineStatus", $window.navigator.onLine);
      $rootScope.$digest();
    , false);

    return onlineStatus;
);

请记住，navigator.onLine 是一个 getter 属性（不是值属性）。它也从 document.body 冒泡到窗口。事件监听器不适合使用捕获阶段。

订阅范围事件，而不是添加观察者：

$scope.$on('onlineStatus', function(ev, online) 
    $scope.netStatus = online ? 'online' : 'offline';
);

有关详细信息，请参阅

MDN Web API Reference - Navigator.onLine MDN Web API Reference - Document.ononline property