angularjs 页面自适应高度的方法
2018-01-17 09:57
1451 查看
需求
在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
<div ui-view auto-height></div>
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
<div ng-app="miniapp" ng-controller="AppController" ng-style="style()" resize> window.height: {{windowHeight}} <br /> window.width: {{windowWidth}} <br /> </div>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Iframe自适应页面高度的几种方法
- angularjs 页面自适应高度
- iframe 自适应高度(在父页面和在子页面调用的两个方法)
- iframe页面调用高度自适应方法代码,兼容IE,FF
- 解决Div自适应高度的方法(转)
- 页面自适应方法
- 判断浏览器,各浏览器页面高度自适应(平铺),各浏览器自适应去除滚动条,浏览器分辨率自适应
- grid(datagrid、treegrid)自适应高度和宽度解决方法
- iframe自适应高度的超精简方法 IE6/7/8/9 & FF经测试完全通过
- Angularjs处理页面闪烁的解决方法
- iframe自适应高度,根据src中页面来得到。
- javascript 装载iframe子页面,自适应高度
- html iframe自适应高度的多种方法方法小结
- JS实现点击按钮获取页面高度的方法
- UITextView自适应高度解决方法
- iframe自适应高度方法小结
- iframe 高度自适应,并且子页面的高度不断变化
- iOS Webview自适应实际内容高度的4种方法详解
- iframe自适应高度的多种方法方法小结
- 使用AngularJS实现可伸缩的页面切换的方法