Angular js 动态设置 Openlayers 地图 window 元素尺寸

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>'

然后只需在 link 函数中定义和更新样式，存储 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();
      });

Angular js 动态设置 Openlayers 地图 window 元素尺寸

Angular js set Openlayers map window element dimensions dynamically

angularjs

openlayers-3