窗口innerWidth尺寸變化

我使用$手錶監聽功能檢查與下面的代碼窗口內寬的變化：窗口innerWidth尺寸變化

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

應該再作用於一些NG-展示條件，如DOM這一個例如：

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

但它似乎隻影響頁面時，我調整它的大小後重新加載它。 console.log（值）也僅在刷新頁面時發生變化。

有沒有什麼辦法可以在調整窗口大小時使這段代碼工作？

來源

2014-09-23 Karly

個人而言，我並不喜歡使用$watch，因爲它效率低下。這就是說，如果你已經使用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);  
    }); 
});

來源

2014-09-23 23:50:23 JME

感謝Johnny，我被告知大部分jQuery功能都集成到了angularjs中，並且在大多數情況下可以避免使用jQuery庫。我對angular非常陌生，並且我無法找到jQuery $（window）.resize函數的替代方案。任何想法我怎麼能做到這一點？ – Karly 2014-09-24 18:25:54

@當你說某些jQuery功能集成到AngularJS中時，你是正確的。但是，如果可用，Angular會使用jQuery，否則它會使用名爲JQLite的子集庫。將jQuery與Angular一起使用絕對沒有錯。也就是說，你在Angular之外做的任何事情都只是確保你理解它與Angular的摘要循環的關係，並相應地處理它。我編輯了我的答案，以包含非jQuery替代方案。 – JME 2014-09-24 22:49:22

窗口innerWidth尺寸變化

回答

相關問題