Question

<html ng-app="vg">

  <body>
  
    <justsvg width="100" height="25"></justsvg>
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
    var app = angular.module('vg', []);
    app
.directive("justsvg", function(){
    return {
        restrict:"AE",
        scope:{
            width: "@",
            height: "@"
        },
        template: "<svg width='{{width}}' height='{{height}}'></svg>"
    }
})
    
    </script>
    
    
  </body>
  
  </html>

所有

我是Angular的新手，当我尝试在指令中渲染SVG时，它一直给我一个错误：

<svg> attribute width: Expected length, "{{width}}".

我的代码非常简单：

.directive("justsvg", function(d3){
    return {
        restrict:"AE",
        scope:{
            width: "@",
            height: "@"
        },
        template: "<svg width='{{width}}' height='{{height}}'></svg>"
    }
})

我使用它的方式是：

<justsvg data=data width="100" height="25"></justsvg>

我想知道为什么即使这个简单的用法仍然会出错？还有，有谁能告诉我如何调试这种错误？

有趣的是：即使我收到此错误，SVG仍然可以正确呈现

Answer 1

将您的=更改为@。

= - 是双向绑定。您必须传递变量
@ - 是单向绑定。您将文本传递给它。

并将您的宽度和高度值放入'。

第一版

您需要使用ng-width和ng-height

template: "<svg ng-width='{{width}}' ng-height='{{height}}'></svg>"

第二版

.directive("justsvg", function(d3){
    return {
        restrict:"AE",
        scope:{
            data: "=",
            width: "@",
            height: "@"
        },
        template: "<svg></svg>",
        link: function ($scope, $element) {
                $element.attr('width', $scope.width);
                $element.attr('height', $scope.height);
        }
    }
})

在函数中，您有一个名为d3的参数。如果它不是您定义的服务，请将其删除。它也会出错。

有关详情，请参阅此处： https://docs.angularjs.org/guide/interpolation

Answer 2

我认为问题是你没有用引号括起{{}}，模板应该是：

template: "<svg width='{{width}}' height='{{height}}'></svg>"

为什么模板渲染在ANgular中获取SVG元素的错误

2 个答案: