Angular js动态设置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

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

Answer 2

您正在模板中分配一个静态值，您应该更改您的模板以使用您的范围内可用的值。

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

然后只需在链接函数中定义和更新样式，存储 scope.style 属性中所需的所有样式。