Angular.js客户端高度

我有一个角。它有一个视图和一个指令。所使用的各种视图具有不同的客户端高度。我试图在视图上放置一个默认背景，而不同的视图有不同的页面高度。

要在屏幕上放置背景，我需要知道客户端窗口的高度，这是背景将被设置为的最小高度。视图的高度，如果它大于客户端高度，背景将需要扩展以覆盖额外的高度。

视图:index . html

<body ng-app="myApp">
  <div main-container></div>
  <script src=......></script>
</body>

视图控制器js/app.js

var myApp = angular.module('myApp', ['ngRoute']);
myApp
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider
        .when('/', {
            templateUrl: 'views/home.html'
        })
        .otherwise({redirectTo: '/'
    });
}]);

Home视图视图/home。

<div style="height: 2000px">
  <p>Home View content</p>
</div>

主容器的视图指令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指令不获取视图的高度，它获取客户端窗口的高度，当页面被重新调整大小&刷新。我还想获得视图高度，这样我就可以将容器背景的高度设置为客户端高度或视图高度，哪个更大。

我想做的是获取视图的高度，在home。html css中设置，有办法做到这一点吗?

请协助。

我建议你把你的指令属性放在ng-view元素上，你的指令也需要一些改变。为了调用高度scope.onResize的计算函数，你需要在element.on('load')上调用它，也将确保每次视图变化都会调用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);
        })
    }}
}])

相关内容

最新更新

热门标签：