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效果
Mar 05 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
JavaScript各类型的关系图解
Oct 16 Javascript
全面理解闭包机制
Jul 11 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
vue如何进行动画的封装
Sep 26 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
Vue computed 计算属性代码实例
Apr 22 Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 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
日本十大惊悚动漫
2020/03/04 日漫
PHP 飞信好友免费短信API接口开源版
2010/07/22 PHP
php自定文件保存session的方法
2014/12/10 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
PHP实现八皇后算法
2019/05/06 PHP
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
jQuery焦点图左右转换效果
2016/12/12 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
深入理解Node内建模块和对象
2019/03/12 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
敏捷开发的主要原则都有哪些
2015/04/26 面试题
挑战杯创业计划书的写作指南
2014/01/07 职场文书
《鱼游到了纸上》教学反思
2014/02/20 职场文书
2014年采购工作总结
2014/11/20 职场文书
2014年医务科工作总结
2014/12/18 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书
关于python类SortedList详解
2021/09/04 Python
Vue h函数的使用详解
2022/02/18 Vue.js