Robert Robert - 1 month ago 11
AngularJS Question

Angular js set Openlayers map window element dimensions dynamically

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?

Answer

You are assigning a static value in the template, you should change your template to use the values available in your scope.

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

And then just define and update the style in your link function storing all style required in scope.style property.