CODEWITHSUNDEEP
angularjs
Ray Suelzer
Ray Suelzer

Reputation: 4107

setting css style from controller angularjs

I've been at this for 30 minutes and cannot figure out what I am doing wrong...

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

No style is being applied to my div at all.

I can get it pass the variable when I put {{mapheight}} in my template but then I have to pass it to the style property, which is apparently not how I should do it.

What am I doing wrong here? This is my first day with angular and I'm almost in tears because I can't even resize a div.

Thank you!

here is the change in my controller:

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

Upvotes: 14

Views: 38417

Answers (1)

Andyrooger
Andyrooger

Reputation: 6746

ng-style takes an object binding, so $scope.mapheight should be an object rather than a string. i.e.

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

The ng-style attribute takes an expression, so putting the string version directly in the HTML

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

would work as it would be evaluated and an object would be created. Setting ng-style="mapheight" is evaluated as taking the value of mapheight from $scope so $scope.mapheight needs to be an object.

Upvotes: 33

Related Questions