Question

我有一个侧栏，我根据$scope中的值折叠（让我们说$scope.open以便于理解）。目前，当您单击关闭/打开按钮时，它只是切换该值，但如果菜单打开，它将在移动设备或小窗口上看起来非常难看。因此，如果用户在移动设备尺寸的设备上或使用小屏幕，我想关闭菜单（将$scope.open设置为false）。通常在CSS中我会使用@media...并创建一个媒体查询来在移动设备上添加一些样式，但在这种情况下，我想做类似的事情，但使用$scope变量。

基本上我想使用我的$scope.open变量进行相当于媒体查询，以确保菜单在移动设备上最小化。有什么想法吗？

Answer 1

也许你可以做类似

的事情

$scope.open = $(document).height() > 500; // can be different

Answer 2

使用jQuery创建一个访问dom的指令可能是一个好主意：

.directive('onloadDirective', function(){
return {
   restrict: 'A',
   scope: {
      open: '='
   }
   link: function(scope, elem, attrs){
       $(window).load(function() {
           //get element
           var myElement = $("#myElement");
           if (myElement.width() > 100 && myElement.height() < 200) {
               scope.open = true;
           } else {
               scope.open = false;
           }
       });
   }

} }）;

使用香草js和角度

的解决方案

    .directive('onloadDirective', function(){
return {
   restrict: 'A',
   scope: {
      open: '='
   }
   link: function(scope, elem, attrs){
       window.onload = function() {
           //get width
           var w = window.innerWidth;
           if (w > 100 && w < 200) {
               scope.open = true;
           } else {
               scope.open = false;
           }
       });
   }

} }）;

，您的HTML可以是这样的：

<body ng-controller="myController" onload-directive open="open">
</body>

Answer 3

如果您使用的是bootstrap，那么正确的方法是将hidden-xs和hidden-sm类添加到侧边栏div。

这会隐藏移动设备上的侧边栏，但仍会在屏幕分辨率为≥992px的所有设备上显示。所以它们看起来并不坏看。

Answer 4

在Luiz的回答基础上，你可以创建一个指令

.directive('onloadDirective', function($window){
return {
   restrict: 'A',
   scope: {
      open: '='
   }
   link: function(scope, elem, attrs){
      if ($window.innerWidth < 200) {
          scope.open = true;
      }
   }
  }  
});

将指令添加到body标记或ui-view，绑定到范围变量（不要在范围上放置原始值 - What are the nuances of scope prototypal / prototypical inheritance in AngularJS?）

根据屏幕大小更改$ scope变量

4 个答案: