需求
在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;
});