Question

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

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

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

这不起作用，甚至不会添加课程。它还需要更新浏览器调整大小。思考指令可能是更好的选择。

编辑：我不想听听是否应该这样做，就好像可以这样做。

Answer 1

你可以这样做。我已经制定了一个指令示例来实现这一点。我在这个例子中选择了宽度为500的更简单的JSFiddle演示。看看以下......

<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 $ window.innerWidth

1 个答案: