Html 角度页面高度指令更新不正确
如果div的高度小于浏览器的高度，我将发出指令，将div的高度设置为浏览器的高度 我创建了以下指令：Html 角度页面高度指令更新不正确,html,css,angularjs,Html,Css,Angularjs,如果div的高度小于浏览器的高度，我将发出指令，将div的高度设置为浏览器的高度 我创建了以下指令： (function() { var directive = function ($log, $window) { function evaluate(element) { var height = element.prop("offsetHeight"); var pageHeight = $window.innerHeight; if
(function() {
var directive = function ($log, $window) {
function evaluate(element) {
var height = element.prop("offsetHeight");
var pageHeight = $window.innerHeight;
if (height < pageHeight)
{
$log.info("element height is less than page height, changing element height.");
element.css("height", pageHeight);
}
}
return {
restrict: "A",
link: function (scope, element, attrs)
{
//call it one time on load to handle first display
evaluate(element);
$window.addEventListener("resize",
function() {
$log.info("Resize directive called: evaluating window size.");
//window size changed, check if we need to adjust the height
evaluate(element);
});
//add a watch to trigger when the inside of the div changes
scope.$watch(function() { return element[0].childNodes.length }, function(values) {
evaluate(element);
});
}
}
};
angular.module('bootstrapApp')
.directive('fullSize', ["$log", "$window", directive]);
（函数（）{
var指令=函数（$log，$window）{
功能评估（元素）{
var高度=元素道具（“偏离视线”）；
var pageHeight=$window.innerHeight；
如果（高度<页面高度）
{
$log.info（“元素高度小于页面高度，正在更改元素高度”）；
css（“高度”，pageHeight）；
}
}
返回{
限制：“A”，
链接：函数（范围、元素、属性）
{
//加载时调用一次以处理第一次显示
评价（要素）；
$window.addEventListener（“调整大小”，
函数（）{
$log.info（“称为：计算窗口大小的Resize指令”）；
//窗口大小已更改，请检查是否需要调整高度
评价（要素）；
});
//添加一个手表以在div内部发生变化时触发
作用域.$watch（函数（）{return element[0].childNodes.length}，函数（值）{
评价（要素）；
});
}
}
};
angular.module（'bootstrapApp'）
.directive（'fullSize'，[“$log”，“$window”，directive]）；
<body>
<fullsize-background-image-1></fullsize-background-image-1>
<navbar-1></navbar-1>
<div class="container-fluid">
<div class="row">
<left-sidebar-1></left-sidebar-1>
<right-sidebar-1></right-sidebar-1>
<div class="col-xs-12 main" id="main" full-size>
<div ng-view="" autoscroll="true"></div>
<footer-1></footer-1>
</div>
</div>
</div>
....
</body>
....
scope.$watch