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 相关文章推荐
Div Select挡住的解决办法
Aug 07 Javascript
js内置对象 学习笔记
Aug 01 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
JavaScript严格模式详解
Jan 16 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
JSON的parse()方法介绍
Jan 31 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 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批量删除数据
2007/01/18 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
WordPress网站性能优化指南
2015/11/18 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
JavaScript中双向数据绑定详解
2017/05/03 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
Python字符串中查找子串小技巧
2015/04/10 Python
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
进程的查看和调度分别使用什么命令
2015/03/25 面试题
营销与策划个人求职信
2013/09/22 职场文书
经济信息管理专业大学生求职信
2013/09/27 职场文书
小学生成长感言
2014/01/30 职场文书
汽车机修工岗位职责
2014/03/06 职场文书
销售个人求职信范文
2014/04/28 职场文书
婚宴邀请函
2015/01/30 职场文书
体育教师个人工作总结
2015/02/09 职场文书
安全保证书怎么写
2015/02/28 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
幽灵公主观后感
2015/06/09 职场文书
教你怎么用Python处理excel实现自动化办公
2021/04/30 Python
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题
Tomcat用户管理的优化配置详解
2022/03/31 Servers
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL