setting css style from controller angularjs

Question

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

There is always a "first day", that does not mean shedding tears would help. :) — dmahapatro
– dmahapatro, Commented Oct 15, 2013 at 1:20

Andyrooger · Accepted Answer · 2013-10-15 01:12:36Z

33

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.

answered Oct 15, 2013 at 1:12

Andyrooger

6,7461 gold badge45 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ray Suelzer Over a year ago

Thank you so much! It's be so incredibly frustrating to go from being able to put together web-apps in a few hours to not being able to resize a div! Thanks. I will post the working code!

Andyrooger Over a year ago

You're welcome, and don't worry. Once you get your head around it all, it's a brilliant framework to work with.

Collectives™ on Stack Overflow

setting css style from controller angularjs

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related