Question

我使用$ watch listener函数检查窗口内部宽度的变化，使用以下代码：

$scope.$watch(function(){
   return $window.innerWidth;
}, function(value) {
   if(value <= 768){
        $scope.mobileSize = "mobile";      
   }else{
        $scope.mobileSize = "screen";
   }
   console.log(value);
});

然后它应该在DOM上运行一些ng-show条件，例如：

                <div ng-show="mobileSize == 'screen'">
                    ...
                </div>

但是在重新调整大小后重新加载它时，它似乎只会影响页面。 console.log（value）也只在刷新页面时发生变化。

在调整窗口大小时，有没有办法让这段代码工作？

Answer 1

就个人而言，由于效率低下，我不喜欢使用$watch。也就是说，如果你已经和Angular一起使用jQuery（或者你愿意使用它），你可以在你的控制器中试试这个：

function setMobileSize(value) {
   console.log(value);
   if(value <= 350){
        $scope.mobileSize = "mobile";      
   }else{
        $scope.mobileSize = "screen";
   }
};

setMobileSize($window.innerWidth);

$(window).resize(function(){
    $scope.$apply(function(){
        setMobileSize($window.innerWidth);    
    });
});

编辑：

如果您不想使用jQuery，可以直接绑定到resize事件。

angular.element($window).bind('resize',function(){
    $scope.$apply(function(){
        setMobileSize($window.innerWidth);    
    });
});

窗口内部宽度更改

1 个答案: