angularjs 頁面自適應高度的方法

define([ "app" ], function(app) {
 app.directive('autoHeight',function ($window) {
 return {
 restrict : 'A',
 scope : {},
 link : function($scope, element, attrs) {
 var winowHeight = $window.innerHeight; //獲取窗口高度
 var headerHeight = 80;
 var footerHeight = 20;
 element.css('min-height',
 (winowHeight - headerHeight - footerHeight) + 'px');
 }
 };
 });
 return app;
});

<div ui-view auto-height></div>

var app = angular.module('miniapp', []);

function AppController($scope) {
 /* Logic goes here */
}

app.directive('resize', function ($window) {
 return function (scope, element) {
 var w = angular.element($window);
 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);

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

<div ng-app="miniapp" ng-controller="AppController" ng-style="style()" resize>
 window.height: {{windowHeight}} <br />
 window.width: {{windowWidth}} <br />
</div>