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

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

});