有没有办法制作类似的东西:
我有一个navigation bar
class: "navbar-fixed-top"
,我还添加了一个样式min-height: 50px;
导航栏下方还有一个content
,类型padding-top: 70px;
问题是 - 如果我将窗口调整为较小,导航栏的高度会增加导航栏下面的内容隐藏在导航栏下。
如何$观看导航栏的高度来改变风格 内容类“padding-top”变得更有价值?
我尝试了this解决方案,但我必须看一个元素,如果有更改,我必须将一些内容分配给另一个元素
重要:只是在Angular中,而不是jQuery
图片有一些解释
答案 0 :(得分:1)
我们可以通过使用jqLite(内置于Angular.js)来实现这一点。遗憾的是,我们无法通过Angular.js版本1来捕获窗口更改事件。
我已经创建了一个小jsfiddle来向您展示如何干净利落地完成这项工作:https://jsfiddle.net/tmmust0r。
您必须做的是angular.element
$window
对象,以使jqLite事件可用并观看resive事件。在此调整大小事件中,您必须调用$scope.$apply();
,因此有角度知道某些内容已发生变化。
当在watch功能中返回时,会触发此功能,如果值已更改,它将调用watch callback。
通过了解窗口宽度,您可能还可以看到导航栏何时断开。如果没有,你可以将窗口调整大小事件更改为任何其他jqLite事件并执行相同的操作。
$scope.$watch(function() {
return $window.innerWidth; // Return the window width value
}, function(newValue) {
$log.info('Width changed!', newValue);
});
angular.element($window).on('resize', function() {
$scope.$apply(); // Make sure the scope knows something has changed
});