异常值 {{specs.height}} 解析高度属性。 index.html

Unexpected value {{specs.height}} parsing height attribute. index.html

我正在使用 angularjs 练习响应式 SVG 我尝试使用 ng-repeat 绘制矩形条形图，但只显示了一个，其他的不断出现错误。

这是我尝试过的：

<!doctype html>
<html>

<head>
  <title>Angular Charts</title>
  <meta charset="utf-8">
  <!--<script src="js/angular.min.js"></script>-->
  <script src="https://code.angularjs.org/1.4.2/angular.min.js"></script>
  <script type="text/javascript">
    var dashboard = angular.module("Dashboard", []);

    dashboard.controller("BarGraphController", function($scope) {
      $scope.specs = {
        height: 30,
        bars: [{
          color: '#2a9fbc',
          width: 50
        }, {
          color: '#f15b2a',
          width: 70
        }, {
          color: '#a62e5c',
          width: 100
        }]
      };
    });
  </script>
</head>

<body ng-app="Dashboard">
  <div ng-controller="BarGraphController">
    <span>
                <svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" style="border:solid 1px gray">
                    <rect ng-repeat="bar in specs.bars" 
                        x="0" y="0" fill="{{bar.color}}" width="{{bar.width}}" height="{{specs.height}}"/>
                </svg>
            </span>
  </div>
</body>

</html>

这是我在浏览器中不断收到的内容：

Unexpected value {{specs.height}} parsing height attribute. index.html Unexpected value {{bar.width}} parsing width attribute. index.html Unexpected value {{specs.height}} parsing height attribute. angular.min.js:70:379 Unexpected value {{bar.width}} parsing width attribute. angular.min.js:70:379 Unexpected value {{specs.height}} parsing height attribute. angular.min.js:70:379 Unexpected value {{bar.width}} parsing width attribute. angular.min.js:70:379 Unexpected value {{specs.height}} parsing height attribute. angular.min.js:70:379 Unexpected value {{bar.width}} parsing width attribute.

所有的矩形都在显示，但它们一个接一个地叠在一起。尝试像这样在矩形上设置 "y" 属性：

<rect ng-repeat="bar in specs.bars" 
                    x="0" y="{{$index * specs.height}}" fill="{{bar.color}}" width="{{bar.width}}" height="{{specs.height}}"/>

这应该 space 它们都按您指定的高度显示出来，这样您就可以看到所有这些。

请参阅此处 fiddle：https://jsfiddle.net/mhrhc19k/

查看此线程以了解您遇到的错误：creating svg elements with angularJS

看起来可能有一个 angular 属性可以用来避免错误。 svg 在加载 angular 之前呈现，因此它实际上看到的是 {{specs.height}} 而不是 30。这就是错误的原因，但它仍在稍后加载。可能是时候创建一个指令了:)