get div width height using angularjs

Question

Это моя директива. Я получаю значение консоли («привет») в моей консоли, но я не получаю высоту или ширину DIV, к которому я добавил директиву размер

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

ниже в моем DIV

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

Answer 1

Вы должны следовать шаблону директивы, который требует функции ссылки.

Кроме того, вам необходимо отпереть прослушивание в окне, когда область действия уничтожена.

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

});