1

Fairly new to Angular and still trying to wrap my head around a few things. I need to get the height of multiple items on a dashboard. I have seen this answer: Get HTML Element Height without JQuery in AngularJS However, I can't work out how to get it to work for multiple items. Surely I don't need to write a separate directive for each element. So playing with this Plunker, I changed the html to below, but get identical values for both elements.

hmm

script.js:

angular.module('myModule', [])
  .directive('myDirective', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element) {
            scope.height = element.prop('offsetHeight');
            scope.width = element.prop('offsetWidth');
        }
    };
  })
;

and the html:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myModule">

    <h1 my-directive>Hello Plunker! width: {{width}}, height: {{height}}
    </h1>
    <h3 my-directive>Smaller Hello Plunker! width: {{width}}, height: {{height}}
    </h3>
  </body>

</html>
Community
  • 1
  • 1
Spleenboy
  • 179
  • 2
  • 13
  • The console gave me different heights when I put your HTML into the Plunker. (37 & 22) – Adjit Mar 24 '16 at 16:03
  • Sorry: linked to the wrong plunker: just edited to the correct one. I'm trying to work out why the bindings are identical – Spleenboy Mar 24 '16 at 16:14
  • Ahh, I see now. Yeah, if you open of the dev tools it shows the h1 and h3 as the same exact height as well, so I think the error is in your directive setup. You should post that code as well. – Adjit Mar 24 '16 at 16:17
  • It's already in the Plunker above in script.js – Spleenboy Mar 24 '16 at 16:31
  • Should still provide the code here, so in the future if Plunker doesn't exist people can still use your question to help them – Adjit Mar 24 '16 at 16:41

2 Answers2

0

The directives have no scope, so they are storing the values on $rootScope. The values reflect the height and width of the last directive to execute. Fix your directive to use either inherited scope or isolate scope.

angular.module('myModule', [])
  .directive('myDirective', function($timeout) {
    return {
        restrict: 'A',
        //set scope to inherited
        scope: true,
        //OR use isolate scope
        //scope: {},
        link: function(scope, element) {
            scope.height = element.prop('offsetHeight');
            scope.width = element.prop('offsetWidth');
        }
    };
  })
;

By setting the scope property, the $compile service will create a new scope (either inherited or isolate) for the directive to store values unique to the directive.

For more information on directive scopes, see AngularJS Comprehensive Directive API -- scope.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
0

I found this script to be very helpful

https://github.com/pocesar/angular-track-height

jojojohn
  • 725
  • 2
  • 10
  • 19