CODEWITHSUNDEEP
javascriptangularjshtmlcssangularjs-directive
Craig
Craig

Reputation: 391

Angular.js Client height

I have an angular.j app, which has a view and a directive. The various views used have different client height. I am trying to place a default background on the view, while various views have different page heights.

To place a background on the screen, I need to know the client window height, which is the minimum height that the background will be set to. The height of the view, if this is bigger than the client height, the background would need expanding to cover the extra height.

The view: index.html

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

The view controller js/app.js

var myApp = angular.module('myApp', ['ngRoute']);

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

The Home view views/home.html

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

The view directive for main-container 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();
        })
    }}
}])

The view directive does not get the height of the view, it gets the client window height when ever the page is re-sized & refreshed. I would like to also get the view height, so that I can set the height of the container background to either the client height or view height, which ever is the bigger.

I'd like to do is get the height of the view, as set in the home.html css, is there a way to do this?

Please assist.

Upvotes: 2

Views: 2130

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

I'd suggest you to put you directive attribute on ng-view element, also your directive needs some changes. In order call calculation function for height scope.onResize you need to call it on element.on('load') also will ensure that the every time view changes will call scope.onResize function.

Directive

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);
        })
    }}
}])

Upvotes: 2

Related Questions