Angular 1.3 + SVG + suppressing "10 $digest...Aborting!"

Question

Although I'm using the "::" prefix in my Angular 1.3 code, I see a very lengthy error message in the Chrome console that starts with this: Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

Note: the SVG graphics are rendered after about 10 seconds or so, but it would be nice to suppress the very lengthy error message that appears in the console, which might also reduce the rendering time.

The code is included below...suggestions are welcome:)

svg-angular.html:

<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>

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

svg-angular.js:

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;
    };
});

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

score 2 · Answer 1 · edited May 23 '17 at 12:29

This has nothing to do with version 1.3 or with svg. The way you can solve this problem is to store the elements in an object. I'm not going to describe the problem here since it's already being answered in this SO question.

One possible solution:

JS

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();
});

HTML

<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>

Fiddle

this is indeed the way to go. – Pierre Gayvallet Nov 07 '14 at 10:29 — Pierre Gayvallet, Nov 07 '14 at 10:29

score 0 · Accepted Answer · answered Nov 07 '14 at 08:40

0

I think that the problem is that you are calling a function for the elements in ngRepeat. What happens is that at every iteration the function is getting called, making the ngRepeat loop infinitely.

You should change this lines (for example):

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

answered Nov 07 '14 at 08:40

Michael

3,308
5
24
36

1

Despite the caveat regarding ng-init, it's good to know this solution. – Oswald Campesato Nov 07 '14 at 19:01

Angular 1.3 + SVG + suppressing "10 $digest...Aborting!"

svg-angular.html:

svg-angular.js:

2 Answers2