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