2

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?

cwiggo
  • 2,541
  • 9
  • 44
  • 87

2 Answers2

0

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');
dfsq
  • 191,768
  • 25
  • 236
  • 258
  • Your solution is throwing back this error: TypeError: element.find(...).height is not a function at link – cwiggo Sep 24 '15 at 11:00
  • Seems that it is having problems finding the element. – cwiggo Sep 24 '15 at 11:00
  • @Chris When link executes, there is no child elements yet. You should try running it in $timeout. (You should be cautious with such directives, that changes elements in timeouts, cause if there are several this will slow browsers, especially IE) Also you should keep in mind that properties like height and width are anot known during exc link function and may change later. – Petr Averyanov Sep 24 '15 at 11:22
-1

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/

cullimorer
  • 755
  • 1
  • 5
  • 23
  • This discussion is about AngularJS *directives*. So, while true, this answer is not relevant to the question. – Mrl0330 Jun 25 '19 at 17:44