angularjs页面自适应高度的方法

需求

在开发构建的业务系统中，通过用户界面视图路由实现页面跳转，初始化进入系统后，右侧内容区域需要自适应浏览器高度。

实现方案

在用户界面视图所在的差异添加指令，指令中通过element.css初始化计算差异的高度，动态更新差异高度管理的监听($ $手表)棱角分明的$digest，实时获取身体高度，动态赋值模型或element.css改变方案1:添加管理的和element.css自适应高度

1.创建管理的

定义([ 'app' ]，函数(app){ app。指令(' autoHeight ')，函数($ window){ return { restrict : ' A '，scope : } }，link : function($scope，element，attrs){ var winowHeight=$ window。内部高度；//获取窗口高度var header height=80 var footer h8=20 element . CSS(' min-height '，(WinowHeight-header height-footer h8)' px ')；} };});返回app })；2.div元素添加管理的

div ui-查看自动高度/div3 .效果图

原界面：右侧区域的高度为自适应内容，导致下方存在黑色的背景色

调整后：右侧区域的高度自适应浏览器

方案2美元：手表监听身体高度，赋值改变高度

1.创建调整指令大小

var app=angular.module('miniapp '，[])；函数AppController($作用域){ /*逻辑走到这里*/}app.directive('resize '，function($ window){ return function(scope，element){ var w=angular。元素($ window)；范围。getwindowdimensions=function(){ return { ' h ' : w . height()，' w ' : w . width()}；};范围$ watch(示波器。getwindowdimensions，function (newValue，old value){ scope。窗口高度=新值。h；范围。窗口宽度=新值。w；范围。style=function(){ return { ' height ' :(新值。h-100)“px”，“width”:(新值。w-100)' px ' }；};},真);w.bind('resize '，function () { scope .$ apply()；});}})2.在差异元素上增加调整指令大小

div ng-app=' miniapp ' ng-controller=' AppController ' ng-style=' style()'调整窗口大小。高度： { {车窗高度} } br/车窗。宽度： { {窗口宽度} } br//div以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。