Question

当用户更改文本框中的数字时，我需要动态更改圆的半径，但我不能在脚本标记中使用角度花括号。是否有一种替代方法可以反映出将角度绑定到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>

Answer 1

查看Angular中的$watch指令，它允许您响应模型状态的更改。例如：

install_requires

将$scope.radius = 0; $scope.$watch('radius', function(newValue, oldValue) { // change the circle here });绑定到文本框：

radius

Answer 2

但是我不能在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/

脚本标记中的角度更改值

2 个答案: