get div width height using angularjs

Question

This is my directive. I'm getting the value of console("hello") in my console but i am not getting the height or width of div to which i have added the directive resize

'use strict';
 app.directive('resize', function ($window) {

    console.log("hello");
    return function (scope, element) {
        restrict: 'E'
        var w = angular.element($window);
        console.log(w);

        scope.getWindowDimensions = function () {
            return {
                'h': w.height(),
                'w': w.width()
            };
        };
        scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {
            scope.windowHeight = newValue.h;
            scope.windowWidth = newValue.w;
            console.log(scope.windowHeight);
            console.log(scope.windowWidth);   

            scope.style = function () {
                return {
                    'height': (newValue.h - 100) + 'px',
                    'width': (newValue.w - 100) + 'px'
                };
            };

        }, true);

        w.bind('resize', function () {
            console.log(w.bind())
            scope.$apply();
        });
    }
})

below in my div

 <div data-ng-show="GameHeaderScreen.Start" class="head" ng-style="style()" id="playid" resize>window.height: {{windowHeight}}
    <br />window.width: {{windowWidth}}

Watch is fired when scope.$digest() is called and if watched variable value has changed. digest is not called when element size is changed. So you can't monitor for width change in $watch — karaxuna
– karaxuna, Commented Oct 29, 2015 at 14:19

murli2308 · Accepted Answer · 2015-10-29 14:31:45Z

1

You have to follow the directive pattern which requires a link function.

Also, you need to unbind the listen on the window when the scope is destroyed.

app.directive('resize', function ($window) {

      var w = angular.element($window);
      console.log(w);

      return {
          restrict: 'E',

          // declare a link function
          link: function(scope,element) {

             scope.getWindowDimensions = function () {
                return {
                   'h': w.height(),
                   'w': w.width()
                };
             };

             scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {
                  scope.windowHeight = newValue.h;
                  scope.windowWidth = newValue.w;

                  scope.style = function () {
                      return {
                         'height': (newValue.h - 100) + 'px',
                         'width': (newValue.w - 100) + 'px'
                      };
                  };
              }, true);

              var resize = w.bind('resize', function () {
                  scope.$apply();
              });

              // remove the global event!!
              scope.$on('$destroy', function() {
                  w.unbind('resize');
              });
          }
      }
}

});

edited Oct 29, 2015 at 14:31

murli2308

3,0224 gold badges31 silver badges47 bronze badges

answered Oct 29, 2015 at 14:22

Reactgular

55.1k24 gold badges175 silver badges219 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Reactgular Over a year ago

@shank I'm in the process of publishing a angular library that handles resize events like your example: github.com/thinkingmedia/thinkingmedia-ui

shank Over a year ago

ThinkMedia..i am, sorry..this is givining me the height and width of whole document...i want ht and width of div

shank Over a year ago

i want ht and width of div but it is giving me the ht and width of whole window or document

Reactgular Over a year ago

@shank replace w.width() with element.width() and element.height()

shank Over a year ago

return { 'h': element.width(), 'w': element.height() }; Still not working :(

|

Collectives™ on Stack Overflow

get div width height using angularjs

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related