我在控制器“myController”里面有一个角度来计算一些点来绘制图像叠加层:
$scope.width = document.getElementById('imageId').clientWidth;
$scope.image_height = document.getElementById('imageId').clientHeight;
$(window).resize(function() {
$scope.$apply(function() {
//do something to update current scope based on the new innerWidth and let angular update the view.
$scope.image_height = document.getElementById('imageId').clientHeight;
$scope.image_width = document.getElementById('imageId').clientWidth;
$scope.x = 20 - ((30 / 2) / $scope.image_width * 100);
$scope.y = 30 - (30 / $scope.image_height * 100);
$scope.x += '%';
$scope.y += '%';
console.log("x: " + $scope.x + "y: " + $scope.y);
});
});
这个html:
<div style="position:relative" ng-controller="myController">
<div> <img id="imageId" src="mysrc" width="100%" height="100%"> </div>
<div style="position:absolute; left:40%; top:20%;">
</div>
</div>
width: {{width}} <br> height: {{image_height}}
宽度返回正常但高度始终返回0,直到我调整屏幕大小。我不明白为什么clientWidth返回正常,clientHeight返回0直到调整大小。我试着加载,ng-init,document.ready ...所有的可能性,没有工作....