如何通过 Angular JS 映射 snap SVG 圆？

【问题标题】：How can I map snap SVG circle via angular JS?如何通过 Angular JS 映射 snap SVG 圆？
【发布时间】：2015-04-01 17:01:16
【问题描述】：

我想通过 angularJS 的输入框设置 snap 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>

【问题讨论】：

标签： javascript angularjs snap.svg

【解决方案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>

【讨论】：