angularjs 页面自适应高度的方法


Posted in Javascript onJanuary 17, 2018

需求

在angularjs构建的业务系统中,通过ui-view路由实现页面跳转,初始化进入系统后,右侧内容区域需要自适应浏览器高度。

实现方案

  1. 在ui-view所在的Div添加directive,directive中通过element.css初始化计算div的高度,动态更新div高度
  2. 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.效果图

原界面:右侧区域的高度为自适应内容,导致下方存在黑色的背景色

angularjs 页面自适应高度的方法

调整后:右侧区域的高度自适应浏览器

angularjs 页面自适应高度的方法

方案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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ie focus bug 解决方法
Sep 03 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
VueJs监听window.resize方法示例
Jan 17 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
React优化子组件render的使用
May 12 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 Javascript
单线程JavaScript实现异步过程详解
May 19 Javascript
Vue 实现拨打电话操作
Nov 16 Javascript
VueJs监听window.resize方法示例
Jan 17 #Javascript
详解AngularJS之$window窗口对象
Jan 17 #Javascript
React-native桥接Android原生开发详解
Jan 17 #Javascript
vue自定义指令directive实例详解
Jan 17 #Javascript
移动web开发之touch事件实例详解
Jan 17 #Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 #Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 #Javascript
You might like
JAVA/JSP学习系列之四
2006/10/09 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
详解YII关联查询
2016/01/10 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
json 定义
2008/06/10 Javascript
javascript firefox不显示本地预览图片问题的解决方法
2008/11/12 Javascript
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
2014/02/12 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
简化vuex的状态管理方案的方法
2018/06/02 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
用Python实现换行符转换的脚本的教程
2015/04/16 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
美国Max仓库:Max Warehouse
2020/05/31 全球购物
金融行业职业生涯规划范文
2014/01/17 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
医院党员公开承诺书
2014/08/30 职场文书
2014年党建工作总结
2014/11/11 职场文书
毕业典礼致辞
2015/07/29 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书