javascript - 在调整窗口大小时更新 Angular 服务变量

Question

我正在尝试在调整大小时更新服务变量。即使我使用 Angular.element 来绑定(bind)事件，更新似乎也没有被 Controller 注册。

初始 setDevice() 有效，但是在调整大小时，当我从 Controller 在窗口调整大小时记录 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;
    })

在 Controller 中:

$scope.device = Device;

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

Answer 1

服务的工作方式是被调用一次，并在每次注入(inject)时提供结果。

无论您注入(inject) Device 多少次，它始终是第一个函数调用返回的内容。

如果窗口大小调整导致设备更改值，则在注入(inject)时不会更改值。

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

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