Question

我正在开发一个快速响应的网站。我的网站使用Bootstrap 3.1和AngularJS。 Bootstrap有一个名为＆＃34; visible-xs＆＃34;的类。这个课程基本上说让一些东西在小屏幕上可见并隐藏在更大的屏幕上。它通过更改display和none之间的CSS block属性值来实现此目的。目前，我有一个看起来如下的div：

<span id="smallContent" class="visible-xs">Mobile Content</span>

当smallContent从可见变为隐藏时，我需要在控制器中以编程方式执行某些操作，反之亦然。我的问题是，如何查看display smallContent属性的更改？我注意到了范围内的$ watch方法（http://docs.angularjs.org/api/ng/type/ $ rootScope.Scope）。但是，这似乎要注意范围内属性的更改，而不是DOM中属性的更改。

有没有办法做我正在尝试的事情？如果是这样，怎么样？

谢谢！

Answer 1

您不需要javascript观察者来做您想做的事情。你可以，但它会有点hacky并且可能对性能有害。

另一点是“响应性”应该仅通过HTML / CSS处理（最大值）。如果你为每个分辨率开始使用不同的JS，那就不好了。

你能做什么：

<span id="smallContent" class="visible-xs">Mobile Content</span>
<span id="smallContent" class="hidden-xs">Not Mobile Content</span>

请记住，您还可以使用Modernizr在JS中模拟媒体查询：

if (Modernizr.mq('only all and (min-width: 768px)') ) {
}

这可能很有用（你可以将它添加到观察者但是，我的答案主要是基于CSS的，你应该尽可能坚持使用CSS解决方案）

观察AngularJS中Bootstrap的CSS属性更改

1 个答案: