Angular js set Openlayers map window element dimensions dynamically

Question

I have an Openlayers 3 map in an element from a directive that needs to resize correctly when the user resizes the browser.

wmm.directive('tchOlMap', ['$window', function ($window) {
var hgt = ($window.innerHeight - 102);
var wdth = ($window.innerWidth - 400);

var MAP_DOM_ELEMENT_ID = 'tchMap';

return {

    //restrict: 'E',
    scope: false,
    //replace: true,

    template: '<div id="' + MAP_DOM_ELEMENT_ID + '" class="full-height" style="height: '+hgt+'px; width: '+wdth+'px; padding: 0px; margin: 0px; border:2px solid;  border-color: #76AF75"></div>',

    link: function postLink(scope, element, attrs) {
     scope.isCollapsed = false;  

      var w = angular.element($window);
        scope.getWindowDimensions = function () {
        return { 'h': w.height(), 'w': w.width() };
        };

    scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {

        scope.windowHeight = newValue.h;
        scope.windowWidth = newValue.w;
        console.log(newValue.w+' '+newValue.h);
        hgt = newValue.h;
        wdth = newValue.w;

        scope.style = function () {

            return { 
                'height': (newValue.h - 102) + 'px',
                'width': (newValue.w - 400) + 'px' 
            };
        };

    }, true);

    w.bind('resize', function () {
        scope.$apply();
    });

I can see in the console that it is returning the updated dimensions but the values are not being applied to the element I'm stuck as to how to apply the dimensions to the element - Can anyone help please?

Robert Robert · Accepted Answer · 2016-10-26T20:00:03

This is the final working code thanks to @pedromarc

wmm.directive('tchOlMap', ['$window', function ($window) {

var MAP_DOM_ELEMENT_ID = 'tchMap';

return {
    //restrict: 'E',
    scope: false,
    //replace: true,

    template: '<div id="' + MAP_DOM_ELEMENT_ID +'" class="full-height" ng-style="style"></div>',

    link: function postLink(scope, element, attrs) {
      scope.style = {};

      scope.isCollapsed = false;  

      var w = angular.element($window);
        scope.getWindowDimensions = function () {
        return { 'h': w.height(), 'w': w.width() };
        };

       scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {

        scope.style = { 
                'height': (newValue.h - 102) + 'px',
                'width': (newValue.w - 400) + 'px',
                'padding' : 0 + 'px',
                'margin' : 0 + 'px',
                'border': 2 + 'px solid',
                'border-color' : '#76AF75'
            };

    }, true);    
    w.bind('resize', function () {
       scope.$apply();
      });

Angular js set Openlayers map window element dimensions dynamically

2 Answers