0

私はブートストラップとangularJSが初めてです。しかし、上部と左側のページが静的で動かないページを作成しています。<nav class="navbar navbar-default navbar-fixed-topブートストラップからヘッダーまで使用しposition: fixed、ページの左側の部分を静的にします。
問題は、ナビバーが動的に作成され、高さがデータベースからのデータに依存することです (これらはフィルターです)。その結果、ヘッダーがあり、ナビゲーションバーがカバーしているためコンテンツの一部のデータが表示されません。どのように解決しますか？多分navbarは良いアプローチではありません。

4

1 に答える 1

1

これを 2 つのディレクティブで行います。要素（あなたの場合はnavbar）の高さを監視するものと、新しい高さに応じて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 に答える