如何通過角JS映射對齊SVG圓？

Question

我想通過angularJS的輸入框來設置抓取SVG圓的半徑，因爲我想在運行時使其變爲動態。 任何人都知道正確的做法嗎？

<div class="app" ng-app ng-style="disableCircle"> 
    <div ng-controller="ctrlSizing"> 
     <label id="rad" style="visibility: hidden">Radius: <input ng-model="rad" type="number" placeholder="How about 300?"></label> 
     <div id="circle"> 
      <svg id="SVG" visibility="hidden" onclick="cInput()" style="height: 800; width: 500; position:absolute; left: 100px;top: 100px;"></svg> 
     </div> 
    </div> 
</div> 
<script> 
    var s = Snap("#SVG"); 
    var circle = s.circle(150,150,100); 

</script> 

Answer 1

您可以創建圓當控制器的負荷，做這樣的事情：

var app = angular.module('app', []); 
 

 
app.controller('ctrlSizing', function($scope) {  
 
    $scope.$watch('rad', function(newVal, oldVal) { 
 
    if (newVal === oldVal) { 
 
     var s = Snap("#SVG"); 
 
     $scope.circle = s.circle(150,150,0); 
 
    } else { 
 
     $scope.circle.animate({r: newVal}, 500); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script> 
 

 
<div ng-app='app'> 
 
    <div ng-controller="ctrlSizing"> 
 
     <label id="rad">Radius: <input ng-model="rad" type="number" placeholder="How about 100?"></label> 
 
     <div id="circle"> 
 
      <svg id="SVG" style="height: 300; width: 300; position:absolute; left: 0px;top: 50px;"></svg> 
 
     </div> 
 
    </div> 
 
</div>