Question

我正在尝试在resize上更新服务变量。即使我使用angular.element来绑定事件，控制器似乎也没有注册更新。

初始setDevice()有效，但在我从控制器调整窗口大小调整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

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

无论您注入Device多少次，它都将是第一个返回的函数调用。

如果窗口调整大小导致Device更改值，则在注入时不会更改值。

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

另一件事很奇怪，你为什么要阻止$ rootScope。$ apply从每次运行开始除了第一次执行之外？

在窗口大小调整时更新角度服务变量

1 个答案: