angularjs - 从控制器angularjs设置css样式

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}} 放入模板中时，我可以让它传递变量，但是我必须将它传递给 style 属性，这显然不是我应该做的。

我在这里做错了什么？这是我使用 Angular 的第一天，我几乎要流泪了，因为我什至无法调整 div 的大小。

谢谢！

这是我的控制器中的更改：

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

Answer 1

ng-style接受对象绑定，因此$scope.mapheight应该是对象而不是字符串。IE

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

该ng-style属性接受一个表达式，因此将字符串版本直接放在 HTML 中

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

会像它被评估一样工作，并且会创建一个对象。设置ng-style="mapheight"被评估为取值mapheightfrom$scope所以$scope.mapheight需要是一个对象。