当用户更改文本框中的数字时，我需要动态更改圆的半径，但我无法在脚本标记中使用尖括号。是否有替代方法可以反射(reflect)将 Angular 绑定(bind)到 html 属性的方式？
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="PosCtrl">
<head>
<style>
#map-canvas {
width: 500px;
height: 400px;
}
</style>
<script src="Scripts/angular.js"></script>
<script src="Scripts/app.js"></script>
<script src="Scripts/PosCtrl.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var radius = 100000;
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(53, -2.5),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDoubleClickZoom: true
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(53, -2.5),
title: 'Some location'
});
// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
map: map,
radius: radius, // 10 miles in metres
fillColor: '#AA0000',
clickable : false
});
circle.bindTo('center', marker, 'position');
google.maps.event.addListener(map = map, 'dblclick', function (event) {
alert("Latitude: " + event.latLng.lat() + " " + ", longitude: " + event.latLng.lng());
circle.radius = 1000;
circle.bindTo('center', marker, 'position');
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div>
{{position.rad}}
<input ng-model="position.rad" />
</div>
</body>
</html>最佳答案
看看 $watch Angular 中的指令允许您响应模型状态的变化。例如:
$scope.radius = 0;
$scope.$watch('radius', function(newValue, oldValue) {
// change the circle here
});
并将radius绑定(bind)到您的文本框:
<input type="text" ng-model="radius">
关于javascript - 脚本标签中的 Angular 变化值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30358272/