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

Question

The objective of the code is to:

1. Get the height of my section
2. Set the height of my Object

The current .js code is:

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);
      }
  };
});

My HTML is:

<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>

How can I set the height of the ".impact-pdf-container" to the newHeightVariable from within the 'safety' directive? I'm quite new to angular js. Do I make a new directive? Or can I simply append the directive to incorporate this functionality.

Another thing is instead of me using the variables 'padding' and 'heading' how can I get other element heights from within the directive?

Answer 1

You can use DOM methods inside the directive. Since you are using jQuery it's even simpler:

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);
      }
  };
});

And regarding how to read padding/margin of the element. It's quite easy with jQuery too so you could just use css method:

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

Answer 2

Best practice dictates that you should never have DOM manipulation happen from inside your controller. Here's an article on it:

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