Question

代码的目标是：

获取我的部分的高度
设置对象的高度

当前的.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>

如何设置＆＃34; .impact-pdf-container＆＃34;的高度？从“安全”内部到新的高度变化指示？我对角度js很陌生。我是否制定新指令？或者我可以简单地附加指令以合并此功能。

另一件事是代替我使用变量＆＃39; padding＆＃39;和＃39;标题＆＃39;如何从指令中获得其他元素高度？

Answer 1

最佳实践要求您不应该从控制器内部进行DOM操作。这是一篇关于它的文章：

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

Answer 2

您可以在指令中使用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');

如何从AngularJS指令中获取和设置元素高度

2 个答案: