解析高度属性的意外值 {{specs.height}}。索引.html答案

【问题标题】：Unexpected value {{specs.height}} parsing height attribute. index.html解析高度属性的意外值 {{specs.height}}。索引.html
【发布时间】：2016-09-16 13:17:38
【问题描述】：

我正在使用 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>

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

解析高度属性时出现意外值 {{specs.height}}。索引.html 解析宽度属性的意外值 {{bar.width}}。索引.html 解析高度属性的意外值 {{specs.height}}。 angular.min.js:70:379 解析宽度属性的意外值 {{bar.width}}。 angular.min.js:70:379 解析高度属性的意外值 {{specs.height}}。 angular.min.js:70:379 解析宽度属性的意外值 {{bar.width}}。 angular.min.js:70:379 解析高度属性的意外值 {{specs.height}}。 angular.min.js:70:379 解析宽度属性时出现意外值 {{bar.width}}。

【问题讨论】：

标签： javascript angularjs svg ng-repeat

【解决方案1】：

所有的矩形都被显示出来了，但是它们是在另一个之上的。尝试像这样在矩形上设置“y”属性：

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

这应该按照您指定的高度将它们全部隔开，以便您可以看到所有这些。

在此处查看小提琴：https://jsfiddle.net/mhrhc19k/

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

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

【讨论】：