Question

我是bootstrap和angularJS的新手。但我正在建立页面，其中顶部和左侧页面将静止不动。我使用引导程序中的<nav class="navbar navbar-default navbar-fixed-top到标题，position: fixed使页面具有静态左侧部分问题是导航栏是动态创建的，高度依赖于来自数据库的数据（这些是过滤器），因此结果我有我的标题和内容中的一些数据不可见，因为导航栏覆盖它。怎么解决？也许navbar不是好方法。

Answer 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

导航器在navibar中动态调整高度

1 个答案: