Угловые js set Динамические размеры элементов окна окна Openlayers

Question

У меня есть карта Openlayers 3 в элементе из директивы, которая должна быть правильно изменена при изменении размера браузера.

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

я могу видеть в консоли, что она возвращается обновленных размерами, но значения не применяются к элементу я застрял о том, как применить размеры к элементу - Может кто-нибудь помочь, пожалуйста?

Answer 1

Вы назначаете статическое значение в шаблоне, вы должны изменить свой шаблон, чтобы использовать значения, доступные в вашей области.

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

А затем просто определите и обновите стиль в своей функции ссылок, сохраняя весь стиль, необходимый для свойства scope.style.

Answer 2

Это последний рабочий код, благодаря @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(); 
     });