設置css樣式angularjs

Question

我已經在這30分鐘，不能找出我在做什麼錯？

HTML：

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

控制器：

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

沒有風格被應用於我的div。

當我將{{mapheight}}放到我的模板中時，我可以通過該變量，但隨後我必須將它傳遞給樣式屬性，這顯然不是我該如何做的。

我在這裏做錯了什麼？這是我帶角度的第一天，我差點流淚，因爲我甚至無法調整div的大小。

謝謝！

這裏是在我的控制器的變化：

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

Answer 1

ng-style需要一個對象綁定，所以$scope.mapheight應該是一個對象，而不是字符串。即

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

的ng-style屬性採用的表達，所以直接把字符串版本在HTML

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

會工作，因爲這將被評估和對象將被創建。設置ng-style="mapheight"被評估爲從$scope取mapheight的值，所以$scope.mapheight需要是一個對象。