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 Timing
Apr 21 Javascript
jQuery JSON的解析方式分享
Apr 05 Javascript
jQuery滚动加载图片效果的实现
Mar 06 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
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
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
Yii使用技巧大汇总
2015/12/29 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
Jquery 基础学习笔记
2009/05/29 Javascript
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
JQuery球队选择实例
2015/05/18 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
js 调用百度分享功能
2017/02/27 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
Vue实现购物车功能
2017/04/27 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
使用python求解二次规划的问题
2020/02/29 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
IRO美国官网:法国服装品牌
2018/03/06 全球购物
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
八年级音乐教学反思
2014/01/09 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
民间个人借款协议书
2014/09/30 职场文书
二手车转让协议书
2015/01/29 职场文书
中秋节主题班会
2015/08/14 职场文书
六年级作文之预言作文
2019/10/25 职场文书
教你如何用cmd快速登录服务器
2022/06/10 Servers