Разбор SVG с AngularJS

Question

Я новичок и в AngularJS и SVG, поэтому, если я делаю что-то ужасно, я извиняюсь.

Я пытаюсь создать шаблон SVG с AngularJS:

Код скрипку: http://jsfiddle.net/WFxF3/

Шаблон:

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
     <pattern id="grid" width="{{cubeWidth}}" height="{{cubeHeight}}" patternUnits="userSpaceOnUse"> 
      <path d="M 0 0 L 0 {{cubeHeight}}" fill="none" stroke="gray" stroke-width="1" stroke-opacity="0.5"/> 
      <path d="M 0 0 L {{cubeWidth}} 0" fill="none" stroke="gray" stroke-width="1" stroke-opacity="0.5"/> 
      <!--<rect width="80" height="80" stroke="red" stroke-width="20" stroke-opacity="0.5" fill="white"/>--> 
     </pattern> 

    </defs> 

    <rect width="100%" height="100%" fill="url(#grid)"/> 
</svg> 

Контроллер:

'use strict'; 

angular.module('gridifyApp') 
    .controller('MainCtrl', function ($scope) { 

     var docWidth = document.width; 
     var columns = 12; 
     var cubeWidth = docWidth/columns; 
     var cubeHeight = 44; 

     $scope.cubeWidth = cubeWidth; 
     $scope.cubeHeight = cubeHeight; 
    }); 

Это, кажется, работает и все же я получаю консольную ошибку:

Любые идеи, почему?

Answer 1

Проблема SVG в настоящее время анализируется, прежде чем угловатое способно сделать что-нибудь, так что значение с двойными фигурными скобками недопустимо, прежде угловой добирается до него. Команда Angular добавила способ определить какую-то «задержанную привязку». Вы можете использовать его, указав желаемый атрибут ng-attr-. Он ожидает, пока оценка привязки не будет действительной и добавит истинный атрибут с надлежащим значением. В вашем случае это будет:

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
     <pattern id="grid" ng-attr-width="{{cubeWidth}}" ng-attr-height="{{cubeHeight}}" patternUnits="userSpaceOnUse"> 
      <path ng-attr-d="M 0 0 L 0 {{cubeHeight}}" fill="none" stroke="gray" stroke-width="1" stroke-opacity="0.5"/> 
      <path ng-attr-d="M 0 0 L {{cubeWidth}} 0" fill="none" stroke="gray" stroke-width="1" stroke-opacity="0.5"/> 
      <!--<rect width="80" height="80" stroke="red" stroke-width="20" stroke-opacity="0.5" fill="white"/>--> 
     </pattern> 

    </defs> 

    <rect width="100%" height="100%" fill="url(#grid)"/> 
</svg> 

Там больше не должно быть никаких ошибок. Не забудьте обновить свою угловую версию.

Answer 2

SVG-анализ происходит до того, как AngularJS может установить любую переменную. Вы могли бы попытаться создать SVG программно:

• SVGSVGElement reference on MDN
• Programmatically creating an SVG image element with JavaScript