需求

在angularjs构建的业务系统中，通过ui-view路由实现页面跳转，初始化进入系统后，右侧内容区域需要自适应浏览器高度。

实现方案

在ui-view所在的Div添加directive，directive中通过element.css初始化计算div的高度，动态更新div高度

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

3.效果图

原界面：右侧区域的高度为自适应内容，导致下方存在黑色的背景色

调整后：右侧区域的高度自适应浏览器

方案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实现自适应高度的textarea实现angular双向绑定

时间： 2018-01-16