ng-class $ window.innerWidth

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示例

此外,如果您希望利用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示例 - 用ng-class