Хотя я использую префикс «::» в своем коде Angular 1.3, я вижу очень длинное сообщение об ошибке в консоли Chrome, которое начинается с этого: Ошибка: [$ rootScope: infdig] 10 $ digest() итераций достиг. Aborting!

Примечание: SVG-графика - это, отображаемая примерно через 10 секунд, но было бы неплохо подавить очень длинное сообщение об ошибке, которое появляется на консоли, что также может уменьшить время рендеринга.

код приведен ниже ... предложения приветствуются :)

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

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

источник

2014-11-07 Oswald Campesato

Я думаю, что проблема заключается в том, что вы вызываете функцию для элементов в ngRepeat. Что происходит, так это то, что на каждой итерации функция вызывается, делая цикл ngRepeat бесконечно.

Вы должны изменить эти строки (например):

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

источник

2014-11-07 08:40:53 Michael

Хотя это будет работать, всегда старайтесь избегать 'ng-init' – Dieterg

Несмотря на оговорку относительно ng-init, полезно знать это решение. –

Это не имеет ничего общего с версией 1.3 или с svg. Способ решения этой проблемы заключается в сохранении элементов в объекте. Я не буду описывать проблему здесь, так как она уже ответила in this SO question.

Одно из возможных решений:

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

источник

2014-11-07 08:40:00 Dieterg

это действительно путь. –

Отлично: это работает отлично. –

Угловой 1.3 + SVG + подавление «10 $ digest ... Aborting!»

SVG-angular.html:

SVG-angular.js:

ответ

Смежные вопросы