javascript - ng 类 $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