失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > anguler 画面布局适应屏幕大小_angularjs 页面自适应高度的方法

anguler 画面布局适应屏幕大小_angularjs 页面自适应高度的方法

时间:2022-01-18 03:27:08

相关推荐

anguler 画面布局适应屏幕大小_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;

});

如果觉得《anguler 画面布局适应屏幕大小_angularjs 页面自适应高度的方法》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。