Javascript 如何使用AngularJS根据屏幕尺寸添加类

如何根据当前屏幕尺寸为元素添加类

现在我使用Bootstrap的

隐藏的xs

和

可见的xs

来处理它，但是这需要在DOM中复制代码和元素

更新：

---

覆盖引导的预定义类对我来说不是一个选项。如果我错了，请纠正我，但在我看来，这只是一种攻击，是一种糟糕的做法。

可能不是最佳做法，但您可以编写一个函数，以屏幕大小为准，然后应用该类

function screenLayout() {
   var clientWidth = document.documentElement.clientWidth;
}

var classtoadd = angular.element('navbar');
if (clientWidth > 1024) {
 classtoadd.addClass('largeScreen')
} else {
 classtoadd.addClass('otherScreen')
}

---

也可以直接使用javascript或JQuery，您可以创建如下所示的指令，但使用CSS媒体查询似乎是更好的解决方案

请看这里

var-app=angular.module（'app'，[]）；
应用程序控制器（'homeCtrl'，函数（$scope）{
});
应用指令（'top'，函数（$window）{
返回{
限制：“AE”，
链接：功能（s、e、a）{
var body=angular.element（document.getElementsByTagName（“body”）；
$window.onresize=函数（事件）{
var clientWidth=document.documentElement.clientWidth；
如果（客户端宽度<768）
{
e、 removeClass（'navbar-default'）
e、 addClass（'navbar-fixed-top'）
body.addClass（'top50'）
}否则{
e、 removeClass（'navbar-fixed-top'）；
e、 addClass（'navbar-default'）；
body.removeClass（'top50'）
}
}
}
}
})

.navbar固定顶{
背景颜色：红色
}
.navbar默认值{
背景颜色：绿色
}
.top50{
填充顶部：50px；
}

切换导航










滚动内容

为什么需要重复的代码和元素？如果你只是想添加一个类，为什么不这样做，并用mediaqueries调用它？你会建议使用类似于

window.screen.availWidth

的方法吗？还是有一些“角度方法”来处理它？我建议你根本不需要角度。。。只需使用mediaqueries CSSCheck这只需使用属性使其固定使用与mediaqueries相同的类（

navbar fixed

），更改维度上所需的内容

@media（最大宽度：800px，最小宽度：500px）{.navbar固定宽度：20%；}@media（最大宽度：1200px，最小宽度：801px）{.navbar固定宽度：40%；}

这不适用于AngularJS！