2

我是 AngularJS 和 SVG 的新手，所以如果我做错了什么，我深表歉意。

我正在尝试使用 AngularJS 创建一个 SVG 模式：

代码小提琴：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;
  });

它似乎工作，但我得到一个控制台错误： angularJS 视图的控制台错误

任何想法为什么？

4

2 回答 2

18

问题是 svg 在 angular 能够做任何事情之前被解析，所以在 angular 得到它之前，带有双花括号的值是无效的。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>

应该没有错误了。请记住更新您的角度版本。

于 2013-07-28T11:20:12.377 回答
2

SVG 解析发生在 AngularJS 可以设置任何变量之前。您可以尝试以编程方式创建 SVG：

于 2013-07-26T21:01:40.293 回答