Установка стиля css из контроллера angularjs

Я был на этом в течение 30 минут и не могу понять, что я делаю неправильно...

HTML:

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

CONTROLLER:

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}} в свой шаблон, но затем мне нужно передать его в свойство стиля, что, по-видимому, не так, как я должен это делать.

Что я здесь делаю неправильно? Это мой первый день с angular, и я почти плачу, потому что я не могу изменить размер div.

Спасибо!

вот изменение моего контроллера:

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

ОТВЕТЫ

Ответ 1

ng-style принимает привязку к объекту, поэтому $scope.mapheight должен быть объектом, а не строкой. то есть.

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

Атрибут ng-style принимает выражение, поэтому размещение строковой версии непосредственно в HTML

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

будет работать так, как он будет оцениваться, и объект будет создан. Значение ng-style="mapheight" оценивается как значение mapheight от $scope, поэтому $scope.mapheight должен быть объектом.