Angularjs 角度1.3+；SVG+；压制；10美元摘要…中止&引用；_Angularjs_Svg

Angularjs 角度1.3+；SVG+；压制；10美元摘要…中止&引用；

angularjs svg

Angularjs 角度1.3+；SVG+；压制；10美元摘要…中止&引用；,angularjs,svg,Angularjs,Svg,虽然我在Angular 1.3代码中使用了“：”前缀，但我在Chrome控制台中看到了一条非常长的错误消息，它以以下内容开头：错误：[$rootScope:infdig]已达到10$digest（）次迭代。流产注意：SVG图形在大约10秒后渲染，但是最好不要显示控制台中出现的非常长的错误消息，这也可能会缩短渲染时间代码包含在下面…欢迎您提出建议：） svg-angular.html： SVG与角度 ================ svg-angular.js： window.App=

虽然我在Angular 1.3代码中使用了“：”前缀，但我在Chrome控制台中看到了一条非常长的错误消息，它以以下内容开头：错误：[$rootScope:infdig]已达到10$digest（）次迭代。流产

注意：SVG图形在大约10秒后渲染，但是最好不要显示控制台中出现的非常长的错误消息，这也可能会缩短渲染时间

代码包含在下面…欢迎您提出建议：）

svg-angular.html：


SVG与角度

================

svg-angular.js：

window.App=angular.module（'App'，[]）；
应用程序控制器（'MyCtrl'，函数（$scope）{
$scope.getElems=function（）{
变量半径=20，最大计数=200，元素=[]；
变量颜色=[“#f00”、“#0f0”、“#00f”]；
对于（var i=0；i这与版本1.3或svg无关。解决此问题的方法是将元素存储在对象中。我不打算在这里描述此问题，因为它已经得到了解答
一种可能的解决办法：
JS
var-app=angular.module（'app'，[]）；
应用程序控制器（'MyCtrl'，函数（$scope）{
函数init（）{
$scope.elems=（函数（）{
var半径=20，
最大计数=200，
元素=[]；
变量颜色=[“#f00”、“#0f0”、“#00f”]；
对于（变量i=0；i

HTML


我认为问题在于您正在为ngRepeat中的元素调用函数。
发生的情况是，在每次迭代中，函数都会被调用，从而使ngRepeat无限循环
您应该更改以下行（例如）：

这确实是一条路要走。尽管有关于ng init的警告，但知道这个解决方案还是很好的。
<html ng-app="App">
    <head>
      <meta chartset="utf-8">
      <title>SVG and Angular</title>

      <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.js"></script>
      <script src="svg-angular.js"></script>
    </head>

    <body>
      <div ng-controller="MyCtrl">
        <svg width="800" height="500">
          <circle once-bind ng-repeat="p in getElems()"
             ng-attr-cx="{{::p.cx}}" ng-attr-cy="{{::p.cy}}"
             ng-attr-fill="{{::p.fill}}" ng-attr-r="{{::p.r}}" >
          </circle>
        </svg>
      </div>
    </body>
</html> 

window.App = angular.module('App', []);

App.controller('MyCtrl', function($scope){
    $scope.getElems = function(){
         var radius=20, maxCount=200, elems=[];
         var colors = ["#f00", "#0f0", "#00f"];

         for (var i=0; i<maxCount; i++) {
            elems.push({cx:i, cy:i, r:radius, fill:colors[i%colors.length]});
         }   

         return elems;
    };
});

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

app.controller('MyCtrl', function ($scope) {
    function init() {
        $scope.elems = (function () {
            var radius = 20,
                maxCount = 200,
                elems = [];
            var colors = ["#f00", "#0f0", "#00f"];

            for (var i = 0; i < maxCount; i++) {
                elems.push({
                    cx: i,
                    cy: i,
                    r: radius,
                    fill: colors[i % colors.length]
                });
            }

            return elems;
        }());
    }

    init();
});

<div ng-app="app">
    <div ng-controller="MyCtrl">
        <svg width="800" height="500">
          <circle once-bind ng-repeat="p in elems"
             ng-attr-cx="{{::p.cx}}" ng-attr-cy="{{::p.cy}}"
             ng-attr-fill="{{::p.fill}}" ng-attr-r="{{::p.r}}">
          </circle>
        </svg>
    </div>
</div>

<svg width="800" height="500" ng-init="elems = getElems()">
  <circle once-bind ng-repeat="p in elems"