AngularJS設置css在指令中標記（Bootstrap粘性頁腳）

我正在開發我的第一個使用Bootstrap作爲響應框架的AngularJS應用程序。該應用需要一個bs sticky footer。通常我使用jQuery來計算頁腳的outerHeight，並將該值設置爲body標籤，以便在css中填充底部。AngularJS設置css在指令中標記（Bootstrap粘性頁腳）

我不想使用jQuery，所以我一直在擺弄這個工作在純AngularJS中。

HTML

<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta charset="utf-8"> 
    <meta name=viewport content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=0"> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="assets/css/style.min.css" rel="stylesheet" type="text/css" media="all" /> 
    </head> 

    <body ng-app="ngApp"> 
    <header> 
    </header> 
    <main> 
     <div class="container"> 
     <div class="content-wrapper"> 
      <div class="row"> 
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
       <!-- --> 
      </div> 
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
       <!-- --> 
      </div> 
      </div> 
     </div> 
     </div> 
    </main> 
    <footer footer-height> 
     <div class="container"> 
     <div class="content-wrapper"> 
      <div class="row"> 
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
       <!-- --> 
      </div> 
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
       <!-- --> 
      </div> 
      </div> 
     </div> 
     </div> 
    </footer> 
    <!-- Scripts --> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script> 
    <!-- App --> 
    <script src="app/app.js" type="text/javascript"></script> 
    </body> 
</html>

var app = angular.module("ngApp", []) 
    // footer height 
    .directive('footerHeight', function() { 
    return { 
     link: function(scope, element) { 
     scope.$watch(function() { 
      var footerHeight = element[0].offsetHeight;    
      var elBody = angular.element(document).find('body') 
      elBody.css('padding-bottom', footerHeight); 
      console.log(footerHeight); 
     }); 
     } 
    }; 
    }); // end app

爲控制檯看到但該值不被設置爲body標籤頁腳的高度被正確地計算。

來源

2017-06-09 Yuri

您可以通過CSS做到這一點只有.. – ziaulain

是看[這裏]（https：//開頭的CSS-技巧.com/snippets/css/sticky-footer /）舉例 – JeanJacques

我知道，但這些例子使用靜態高度。我想使用可變的頁腳高度。我還想了解更多的框架... – Yuri

我想你需要創建自己的指令，你可以把你的DIV

app.directive('outerHeight', function(){ 
    return{ 
    restrict:'A', 
    link: function(scope, element){ 
     return angular.element(element).prop('offsetHeight'); 
    } 
    }; 
}); 

<div outer-height></div>

來源

2017-06-09 13:10:23

謝謝你，但這是如何真正把價值應用於CSS？ – Yuri

你可以使用angular.element在同一個指令中做到這一點，你也可以更新css！ –

示例： angular.element（document）.find（'head'）。prepend（'you style'）; 的文檔： https://docs.angularjs.org/api/ng/function/angular.element –

AngularJS設置css在指令中標記（Bootstrap粘性頁腳）

回答

相關問題