腳本標記中的角度更改值

當用戶更改文本框中的數字時，我需要動態更改圓的半徑，但我無法在腳本標記中使用角度花括號。有沒有一種替代方法可以反映您可以將角度綁定到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>

來源

2015-05-20 Sepehr Sobhani

您是否嘗試過包括'初始化（）'代碼'PosCtrl內'JavaScript？ – UsainBloot

看一看在角的$watch指令，它可以讓你在模型狀態的變化。例如：

$scope.radius = 0; 
$scope.$watch('radius', function(newValue, oldValue) { 
    // change the circle here 
});

並綁定radius到你的文本框：

<input type="text" ng-model="radius">

來源

2015-05-20 19:12:57 garryp

，但我不能在腳本標籤使用角大括號。是否有一個替代方法，它反映了您可以將角度綁定到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/

來源

2015-05-20 20:21:45

腳本標記中的角度更改值

回答

相關問題