Question

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

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

观点：的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.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();
        })
    }}
}])

视图指令不会获得视图的高度，它会在页面重新调整大小时获得客户端窗口高度。刷新。我想获得视图高度，以便我可以将容器背景的高度设置为客户端高度或视图高度，这是更大的。

我想做的是获取视图的高度，如home.html css中所设置，有没有办法做到这一点？

请协助。

Answer 1

我建议您将指令属性放在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);
        })
    }}
}])

Angular.js客户端高度

1 个答案: