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 相关文章推荐
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
Bootstrap table使用方法总结
May 10 Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 Javascript
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 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
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
修改发贴的编辑功能
2007/03/07 Javascript
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
JQquery的一些使用心得分享
2012/08/01 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
wxPython窗口的继承机制实例分析
2014/09/28 Python
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
python通过zabbix api获取主机
2018/09/17 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
Python 创建TCP服务器的方法
2020/07/28 Python
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
仓库规划计划书
2014/04/28 职场文书
触电现场处置方案
2014/05/14 职场文书
植树节口号
2014/06/21 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
2014年维修工作总结
2014/11/22 职场文书
文艺演出主持词
2015/07/01 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS