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 相关文章推荐
JavaScript 空位补零实现代码
Feb 26 Javascript
JS焦点图切换,上下翻转
May 12 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
react native 仿微信聊天室实例代码
Sep 17 Javascript
js+canvas实现转盘效果(两个版本)
Sep 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
关于IIS php调用com组件的权限问题
2012/01/11 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
2019/04/30 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
python中cPickle用法例子分享
2014/01/03 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
python实现字符串加密成纯数字
2019/03/19 Python
python交互模式基础知识点学习
2020/06/18 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
详解px单位html5响应式方案
2018/03/08 HTML / CSS
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
计算机应用职专应届生求职信
2013/11/12 职场文书
咖啡店自主创业商业计划书
2014/01/22 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
六一晚会主持词开场白
2015/05/28 职场文书