Adjust Div Height with Angular Directive

Ref: Stackoverflow

if you have brought in jQuery to help you do DOM manipulation, you are likely doing Angular wrong. 

Ans.1:

angular.module('myApp', []).directive('banner', function() {
    return function (scope, element, attrs) {
        element.height($(window).height() - $('.header').outerHeight());
    }
});

And in template:

 banner>foo bar

Ans.2:

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

myApp.directive('banner', function ($window) {

    return {
        restrict: 'A',

        link: function (scope, elem, attrs) {

            var winHeight = $window.innerHeight;

            var headerHeight = attrs.banner ? attrs.banner : 0;

            elem.css('height', winHeight - headerHeight + 'px');
        }
    };
});

html:

 banner="250" class="banner">I'm a banner!