0

我是 bootstrap 和 angularJS 的新手。但我正在构建页面，其中顶部和左侧页面将是静态的，不会移动。我使用<nav class="navbar navbar-default navbar-fixed-top从引导程序到标题并position: fixed在页面的左侧部分保留静态。
问题是导航栏是动态创建的，高度取决于数据库中的数据（这些是过滤器），所以结果我有我的标题，并且在内容中有些数据不可见，因为导航栏覆盖了它。它是如何解决的？也许导航栏不是好方法。

4

1 回答 1

1

我会用两个指令来做到这一点。一种监视元素（在您的情况下为导航栏）高度，另一种根据新高度更改css填充（或您想要的任何内容）。

.directive('getHeight', function() {
    var addPadding = 10;
    return {
        link: function(scope, element, attrs) {
            scope.$watch( 'watchedHeight', function(newHeight) {
                element.css({
                  'padding-top': newHeight+addPadding+'px'
                });
            });
        }
    }
})

.directive('watchHeight', function($rootScope) {
    return {
        link: function(scope, element, attrs) {
            scope.$watch(function() {
              scope.watchedHeight = element[0].offsetHeight;
            });

            angular.element(window).on('resize', function() {
              $rootScope.$apply(function() {
                scope.watchedHeight = element[0].offsetHeight;
              })
            });
        }
    }

});

HTML：

  <body ng-app="myApp" ng-controller="TestCtrl" get-height="">
    <nav class="navbar navbar-default navbar-fixed-top" watch-height="">
      <div class="container">
        <p class="navbar-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</p>
      </div>
    </nav>
    <div class="container">
        Lorem ipsum dolor sit amet...
    </div>
  </body>

我还监视窗口大小调整，不知道您的情况是否需要。

http://plnkr.co/edit/AGdhZBiCfbH8GbU3y3Yy

于 2015-07-22T08:40:13.920 回答