我有一个 angular.j 应用程序，它有一个 View 和一个指令。使用的各种 View 具有不同的客户端高度。我试图在 View 上放置默认背景，而各种 View 具有不同的页面高度。
要在屏幕上放置背景，我需要知道客户端窗口高度，这是背景设置的最小高度。 View 的高度，如果大于客户端高度，则背景需要扩展以覆盖额外的高度。
View : 索引.html
<body ng-app="myApp">
<div main-container></div>
<script src=......></script>
</body>
View Controller js/app.js
var myApp = angular.module('myApp', ['ngRoute']);
myApp
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html'
})
.otherwise({redirectTo: '/'
});
}]);
主页 View View /home.html
<div style="height: 2000px">
<p>Home View content</p>
</div>
主容器的 View 指令 js/指令/main.js
myApp.directive('mainContainer', ['$window', function($window) {
return {
link: function(scope, elem, attrs) {
scope.onResize = function() {
var header = document.getElementsByClassName('main-container')[0];
elem.windowHeight = $window.innerHeight - header.clientHeight - 80;
$(elem).height(elem.windowHeight);
}
scope.onResize();
angular.element($window).bind('resize', function() {
scope.onResize();
})
}}
}])
view 指令不会获取 View 的高度，它会在页面大小调整和刷新时获取客户端窗口高度。我还想获取 View 高度，以便我可以将容器背景的高度设置为客户端高度或 View 高度，以较大者为准。
我想做的是获取 View 的高度，如 home.html css 中设置的那样，有办法做到这一点吗？
请帮忙。
最佳答案
我建议您将指令属性放在 ng-view 元素上，您的指令也需要一些更改。为了调用高度计算函数scope.onResize，您需要在element.on('load')上调用它，同时确保每次 View 更改都会调用scope.onResize函数。
指令
myApp.directive('mainContainer', ['$window', function($window) {
return {
link: function(scope, elem, attrs) {
scope.onResize = function() {
var header = document.getElementsByClassName('main-container')[0];
elem.windowHeight = $window.innerHeight - header.clientHeight - 80;
$(elem).height(elem.windowHeight);
}
scope.onResize();
angular.element($window).bind('resize', scope.onResize);
//below function will call on view change in ng-view
element.on('load', function(){
$scope.$apply(scope.onResize);
})
}}
}])
关于javascript - Angular.js 客户端高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30548961/