angularjs中页面自适应高度的示例分析
这篇文章主要介绍了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}}
感谢你能够认真阅读完这篇文章，希望小编分享的“angularjs中页面自适应高度的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
