<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>All:
I am a beginner with Angular, and when trying to display SVG in a directive, I keep encountering an error like this:
<svg> attribute width: Expected length, "{{width}}".
My code is straightforward:
.directive("justsvg", function(d3){
return {
restrict:"AE",
scope:{
width: "@",
height: "@"
},
template: "<svg width='{{width}}' height='{{height}}'></svg>"
}
})
This is how I use it:
<justsvg data=data width="100" height="25"></justsvg>
I'm curious as to why even this basic usage is still causing an error? Also, can someone guide me on how to debug this type of error?
An intriguing observation is that despite the error message, the SVG still renders correctly