本篇文章主要介绍了angularjs 页面自适应高度的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
需求
在angularjs构建的业务系统中，通过ui-view路由实现页面跳转，初始化进入系统后，右侧内容区域需要自适应浏览器高度。
实现方案
- 在ui-view所在的Div添加directive，directive中通过element.css初始化计算div的高度，动态更新div高度
- directive监听（$$watch)angular的$digest，实时获取body高度，动态赋值model或element.css改变
方案1：添加directive和element.css自适应高度
1.创建directive
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; }); 2.div元素添加directive
3.效果图
原界面：右侧区域的高度为自适应内容，导致下方存在黑色的背景色
调整后：右侧区域的高度自适应浏览器
方案2：$watch监听body高度，赋值改变高度
1.创建resize directive
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(); }); } }) 2.在div元素上增加resize directive
window.height: {{windowHeight}}
window.width: {{windowWidth}}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持html中文网。
以上就是angularjs 页面自适应高度的方法的详细内容，更多请关注0133技术站其它相关文章！
