Angular 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

これは、あなたの答えのための

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