我已经在这个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属性,这显然不是我应该怎么做的.
我在这里做错了什么?这是我第一天有角度,我几乎流泪,因为我甚至不能调整大小.
谢谢!
这是我的控制器的变化:
$scope.mapHeight = { 'min-height': getHeight() };
解决方法
@H_404_25@ 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需要成为一个对象.