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 相关文章推荐
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
js 金额格式化来回转换示例
Feb 23 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
AngularJS压缩JS技巧分析
Nov 08 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
JS数组splice操作实例分析
Oct 12 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
一文帮你理解PReact10.5.13源码
Apr 03 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
php下清空字符串中的HTML标签的代码
2010/09/06 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
PHP使用feof()函数读文件的方法
2014/11/07 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
微信小程序实现滑动删除效果
2017/05/19 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
解决vue admin element noCache设置无效的问题
2019/11/12 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
Python中的文件和目录操作实现代码
2011/03/13 Python
python BeautifulSoup使用方法详解
2013/11/21 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
详解python itertools功能
2020/02/07 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
2014年教务处工作总结
2014/12/03 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python