本篇文章主要介紹了angularjs 頁面自適應高度的方法，現在分享給大家，也給大家做個參考。
需求
在angularjs建構的業務系統中，透過ui-view路由實現頁面跳轉，初始化進入系統後，右側內容區域需要自適應瀏覽器高度。
實作方案
在ui-view所在的p添加directive，directive中透過element.css初始化計算p的高度，動態更新p高度
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.p元素新增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.在p元素上增加resize directive
window.height: {{windowHeight}}
window.width: {{windowWidth}}
上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
############# ##使用vue less如何實作簡單換膚功能############使用angular、react和vue如何實作相同的面試題元件######以上是angularjs中如何實作頁面自適應？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
