使用angularjs獲取div寬度高度

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

});