ng-class $window.innerWidth

Question

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

ng-class="{ large: isLarge() }"

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

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

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

Answer 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