ng-class $window.innerWidth

Posted 2023-03-06

【中文标题】ng-class $window.innerWidth

【英文标题】：

【发布时间】：2015-08-16 17:29:45

【问题描述】：

如果屏幕宽度大于 x（即 1200），我正在尝试找到一种解决方案来为项目添加类。

ng-class=" large: isLarge() "

$scope.isLarge = function () 
  return ($window.innerWidth >= 1200);

这不起作用，甚至不会添加类。它还需要在浏览器调整大小时进行更新。认为指令可能是更好的选择。

编辑：我不想知道是否应该这样做，只要可以做到。

【问题讨论】：

为什么不使用媒体查询在 css 中定位它？那将是最好的选择

我会，但这会影响精灵表中的数百个对象。我不想放在媒体查询中，因为它会添加数百行 css。

考虑到您在 javascript 中采用的方法以及添加 ng-class 调用一个运行每个摘要循环恕我直言的函数，我认为 css 文件中额外的 100 行并不重要。跨度>

【参考方案1】：

你可以这样做。我制作了一个指令示例来完成此任务。为了更简单的 JSFiddle 演示，我在本示例中选择了 500 的宽度。看看下面...

<div class="item" resizer></div>

---

.item 
    background-color: tomato;
    height: 100px;
    width: 100px;


.large 
    background-color: dodgerblue;

---

app.directive('resizer', ['$window', function ($window) 
    return 
        restrict: 'A',
        link: function (scope, elem, attrs)             
            angular.element($window).on('resize', function () 
                $window.innerWidth > 500 ? 
                    elem.addClass('large') : elem.removeClass('large')
            );
        
    
]);

JSFiddle Example

此外，如果您想利用ng-class 解决方案，请试一试...

<div class="item" resizer ng-class=" 'large': isLarge "></div>

---

app.directive('resizer', ['$window', function ($window) 
    return 
        restrict: 'A',
        link: function (scope, elem, attrs)       
            angular.element($window).on('resize', function () 
                scope.$apply(function()
                    scope.isLarge = $window.innerWidth > 500 ? true : false;
                )
            );
        
    
]);

JSFiddle Example - 与ng-class

【讨论】：

ng-class 版本效果很好，只是它在调整大小之前不会添加类，即使它在初始加载时应该存在。

@codephobia 这不是一个大问题，只需在 link 函数的开头添加相同的逻辑即可。查看this JSFiddle。您也许可以简化它，但要分享基本思想......

是的，它可以在小提琴中使用，但由于某种原因，在我超过“500”阈值并返回之前不会将类添加到元素中。

我想不出为什么会这样。您可以在初始窗口检查后立即在link 函数中注销scope.isLarge 吗？这应该有效。控制台错误？

没有错误，console.log 返回 true，它只是没有使用 ng-class 应用类...我以前见过这个问题，并认为它可能是 angularjs 中的一个错误1.3.我会弄清楚的，但这应该让我工作。我会将此标记为正确答案。谢谢！