脚本标签中的角度变化值
[英]Angular change value in script tag
问题描述
当用户更改文本框中的数字时，我需要动态更改圆的半径，但是我不能在script标签中使用角花括号。 有没有一种替代方法可以反映将angular绑定到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>
2 个解决方案
解决方案1
0 2015-05-20 19:12:57
看看Angular中的$watch指令，它可以让您响应模型状态的变化。 例如：
$scope.radius = 0;
$scope.$watch('radius', function(newValue, oldValue) {
// change the circle here
});
并将radius绑定到您的文本框：
<input type="text" ng-model="radius">
解决方案2
0 2015-05-20 20:21:45
但是我不能在script标签中使用斜花括号。 有没有一种替代方法可以反映将angular绑定到html属性的方式？
绑定一个HTML标签内的值？ 以下也是可能的：
HTML：
<div ng-app='App' ng-controller="AppCtrl">
<div id="{{ radius }}"></div>
<!-- use quotes around the braces, inspect in browser and you will see that id = 2 -->
</div>
JS：
angular.module('App', [])
.controller('AppCtrl', function($scope) {
$scope.radius = 2; //this value can be bound to the DOM element
});
小提琴： https : //jsfiddle.net/5m0j3e6k/
使用jQuery更改Angular标签值
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.