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属性中所需的所有样式。

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

2 个答案: