ayar css stil angularjs

Question

Ben 30 dakika boyunca buna oldum ve yanlış yapıyorum bilemiyorum ...

HTML:

<div ng-controller="main"> 
    <div ng-style="mapheight"> 
     <google-map center="center" zoom="zoom" style="height: inherit;"></google-map> 
     </div> 
</div> 

KONTROL:

angular.module('csApp.controllers', ["google-maps"]). 
    controller("main", function($scope) { 
     $scope.mapheight = "{'min-height':" + getHeight() + "px;}"; 
     $scope.center = { 
      latitude: 45, 
      longitude: -73 
     }; 
     $scope.zoom = 8; 

     function getHeight() { 
      return (window.innerHeight * .70); 
     } 
    }) 

Divamıma hiç stil uygulanmıyor. Ben koyduğunuzda

Ben değişken geçmek alabilirsiniz {{mapheight}} Şablonumdaki ama sonra bunu yapmak nasıl görünüşte değil stil özelliği, onu geçmek zorunda.

yanlış burada ne yapıyorum? Bu benim açgözlü ile ilk günüm ve neredeyse gözyaşlarım var çünkü bir div'i bile yeniden boyutlandıramıyorum.

Teşekkür ederiz! Burada

benim denetleyicisi değişikliktir:

$scope.mapHeight = { 'min-height': getHeight() }; 

Answer 1

ng-style bağlayıcı bir nesneyi alır, böylece $scope.mapheight bir nesne yerine bir dize olmalıdır. yani

$scope.mapheight = { 
    'min-height': getHeight() + "px" 
}; 

ng-style nitelik yüzden değerlendirilecek olacak ve bir nesne oluşturulur gibi çalışacak HTML

ng-style="{'min-height': '40px'}" 

doğrudan dize sürümünü koyarak, bir ifade alır. ng-style="mapheight" ayarı mapheight değerini $scope değerine göre değerlendirilerek $scope.mapheight'un bir nesne olması gerekir.