在 window 调整大小时更新 angular 服务变量

Question

我正尝试在调整大小时更新服务变量。控制器似乎没有注册更新，即使我使用 angular.element 绑定事件。

最初的 setDevice() 有效，但是当我从控制器在 window 调整大小上登录 Device 服务时调整大小，服务没有变化。我尝试 $rootScope.$apply 广播更改，但这也不起作用。

服务：

angular.module('health.device', [])
    .service('Device', function($window, $rootScope){

        var Device;

        function setDevice(dontApplyScope){
            Device = {
                isMobile: Modernizr.mq('only screen and (max-width: 40em)'),
                isTablet: Modernizr.mq('only screen and (min-width: 40.063em) and (max-width: 64em)')
            };

            if(!dontApplyScope){
                return $rootScope.$apply();
            }
        }

        setDevice(true);

        angular.element($window).bind('resize', setDevice);

        return Device;
    })

在控制器中：

$scope.device = Device;

angular.element($window).bind('resize', function(){
    console.log(Device); // doesn't change
})

Answer 1

服务被调用一次，并在每次注入时提供结果。

无论注入设备多少次，它始终是第一个函数调用返回的值。

如果 window 调整大小导致设备更改值，则在注入时不会更改值。

您可以通过获取依赖于服务值的任何代码从函数中获取它来更改值，以便内部状态与第一次注入时首次评估时返回的内容分开。

另一件奇怪的事情，你为什么要阻止 $rootScope.$apply 除了第一次执行之外每次都是运行？

在 window 调整大小时更新 angular 服务变量

Update angular service variable on window resize

javascript

resize

angularjs

angularjs-service