如何從AngularJS指令中獲取和設置元素高度

Question

該代碼的目標是：

1. 得到我的部分的高度
2. 設置我的對象的高度

當前的.js代碼為：

app.directive('safety', function() {
  return {
      restrict: 'A',
      link: function(scope, element) {

          var section = element[0].offsetHeight;
          var padding = 60;
          var heading = 49;
          var button = 74;
          var margin = padding + heading + button;

          var newHeight = section - margin;

          console.log('Section: ' + section);
          console.log('New height: ' + newHeight);
      }
  };
});

我的HTML是：

<section class="section container-fluid safety-container" safety>
    <h1 class="page-header">Procedures</h1>  
    <div class="row">
        <div class="impact-doc-link col-md-12"> 
            <a class="btn btn-safety btn-block" href="doc/procedures.pdf" role="button">Procedures</a>
        </div>
        <div class="impact-pdf-container col-md-12">
            <object data="doc/procedures.pdf" type="application/pdf" width="100%" height="100%">
            alt : <a href="doc/procedures.pdf">doc/procedures.pdf</a>
            </object>
        </div>
    </div>
</section>

如何從“安全”指令中將“ .impact-pdf-container”的高度設置為newHeightVariable？ 我對angular js很陌生。 我是否要制定新指令？ 或者我可以簡單地追加指令以合並此功能。

另一件事是代替我使用變量“ padding”和“ heading”來獲取指令中其他元素的高度？

Answer 1

您可以在指令內使用DOM方法。 由於您使用的是jQuery，因此更加簡單：

app.directive('safety', function() {
  return {
      restrict: 'A',
      link: function(scope, element) {

          var section = element[0].offsetHeight;
          var padding = 60;
          var heading = 49;
          var button = 74;
          var margin = padding + heading + button;

          var newHeight = section - margin;

          element.find('.impact-pdf-container').height(newHeight);
      }
  };
});

關於如何讀取元素的填充/邊距。 jQuery也很容易，因此您可以使用CSS方法：

var padding = element.css('padding-left');

Answer 2

最佳實踐表明，永遠不要在控制器內部進行DOM操作。 這里有一篇文章：

http://ng-learn.org/2014/01/Dom-Manipulations/