angularjs 頁面自適應(yīng)高度的方法
更新時間：2018年01月17日 09:57:42 作者：liubinwyzbt
本篇文章主要介紹了angularjs 頁面自適應(yīng)高度的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
需求
在angularjs構(gòu)建的業(yè)務(wù)系統(tǒng)中，通過ui-view路由實現(xiàn)頁面跳轉(zhuǎn)，初始化進(jìn)入系統(tǒng)后，右側(cè)內(nèi)容區(qū)域需要自適應(yīng)瀏覽器高度。
實現(xiàn)方案
- 在ui-view所在的Div添加directive，directive中通過element.css初始化計算div的高度，動態(tài)更新div高度
- directive監(jiān)聽（$$watch)angular的$digest，實時獲取body高度，動態(tài)賦值model或element.css改變
方案1：添加directive和element.css自適應(yīng)高度
1.創(chuàng)建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.效果圖
原界面：右側(cè)區(qū)域的高度為自適應(yīng)內(nèi)容，導(dǎo)致下方存在黑色的背景色
調(diào)整后：右側(cè)區(qū)域的高度自適應(yīng)瀏覽器
方案2：$watch監(jiān)聽body高度，賦值改變高度
1.創(chuàng)建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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Angularjs實現(xiàn)多個頁面共享數(shù)據(jù)的方式
本文給大家介紹使用Angularjs實現(xiàn)多個頁面共享數(shù)據(jù)的方式，通過定義一個共享服務(wù)service來實現(xiàn)此功能，對angularjs共享數(shù)據(jù)相關(guān)知識感興趣的朋友一起學(xué)習(xí)2016-03-03
這篇文章主要介紹了AngularJS入門教程（零）：引導(dǎo)程序,本文是系列文章中的一篇,本系列文章用開發(fā)一個AngularJS應(yīng)用來講解,需要的朋友可以參考下2014-12-12
angular ng-repeat數(shù)組中的數(shù)組實例
下面小編就為大家?guī)硪黄猘ngular ng-repeat數(shù)組中的數(shù)組實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
AngularJS基礎(chǔ)學(xué)習(xí)筆記之表達(dá)式
AngularJS表達(dá)式用于應(yīng)用程序數(shù)據(jù)綁定到HTML。表達(dá)式都寫在雙括號就像{{表達(dá)式}}。表達(dá)式中的行為跟ng-bind指令方式相同。 AngularJS應(yīng)用表達(dá)式是純javascript表達(dá)式，并輸出它們被使用的數(shù)據(jù)在那里。2015-05-05
這篇文章主要介紹了AngularJS 中括號的作用,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
今天小編就為大家分享一篇angular4強(qiáng)制刷新視圖的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
angular實現(xiàn)input輸入監(jiān)聽的示例
今天小編就為大家分享一篇angular實現(xiàn)input輸入監(jiān)聽的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Angular實現(xiàn)svg和png圖片下載實現(xiàn)
這篇文章主要介紹了Angular實現(xiàn)svg和png圖片下載實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了使用Angular CLI從藍(lán)本生成代碼詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
angularjs實現(xiàn)過濾并替換關(guān)鍵字小功能
這篇文章主要為大家詳細(xì)介紹了angularjs實現(xiàn)過濾并替換關(guān)鍵字小功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09