Angular.js 客户端高度答案

【问题标题】：Angular.js Client heightAngular.js 客户端高度
【发布时间】：2015-08-13 11:08:29
【问题描述】：

我有一个 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>

主容器的视图指令 js/directives/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 中设置，有没有办法做到这一点？

请帮忙。

【问题讨论】：

我认为main-container 指令应该放在ng-view 元素上..会解决你的问题。
这很有用，我认为我的例子坏了。进一步研究它。

标签： javascript angularjs html css angularjs-directive

【解决方案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);
        })
    }}
}])

【讨论】：