前端之家收集整理的这篇文章主要介绍了
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
获取窗口高度
var headerHeight = 80;
var footerHeight = 20;
element.css('min-height',(winowHeight - headerHeight - footerHeight) + 'px');
}
};
});
return app;
});
2.div元素添加directive
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();
});
}
})
