$ watch元素的高度和另一个的变化

Question

有没有办法制作类似的东西：

我有一个navigation bar class: "navbar-fixed-top"，我还添加了一个样式min-height: 50px;

导航栏下方还有一个content，类型padding-top: 70px;

问题是 - 如果我将窗口调整为较小，导航栏的高度会增加导航栏下面的内容隐藏在导航栏下。

  

如何$观看导航栏的高度来改变风格   内容类“padding-top”变得更有价值？

我尝试了this解决方案，但我必须看一个元素，如果有更改，我必须将一些内容分配给另一个元素

重要：只是在Angular中，而不是jQuery

图片有一些解释

Answer 1

我们可以通过使用jqLit​​e（内置于Angular.js）来实现这一点。遗憾的是，我们无法通过Angular.js版本1来捕获窗口更改事件。

我已经创建了一个小jsfiddle来向您展示如何干净利落地完成这项工作：https://jsfiddle.net/tmmust0r。

您必须做的是angular.element $window对象，以使jqLit​​e事件可用并观看resive事件。在此调整大小事件中，您必须调用$scope.$apply();，因此有角度知道某些内容已发生变化。

当在watch功能中返回时，会触发此功能，如果值已更改，它将调用watch callback。

通过了解窗口宽度，您可能还可以看到导航栏何时断开。如果没有，你可以将窗口调整大小事件更改为任何其他jqLit​​e事件并执行相同的操作。

$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
});