使用双花​​括号{{}}的插值绑定导致属性中的错误

Question

我有模板：

<svg style="width:{{bWidth}}px; height:5vh;">
 <path d="M0,0 L 0, {{pathOne}} {{pathTwo}},{{pathThree}} {{pathFour}},0 Z" fill="#666666" vector-effect="non-scaling-stroke"/>
 <image width="150px" height="{{imgHeight}}px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img.png"/>
</svg>

我想在创建时设置svg宽度和图像高度，

app.directive("customSvg", function($document, $timeout) {
return {
  restrict: "E",
  replace: true,
  link: function(scope, element, attrs) {
    scope.bWidth= 150;
    scope.imgHeight=100;
    scope.pathOne = 50;
    scope.pathTwo = 50;
    scope.pathThree = 50;
    scope.pathFour = 50;
  },
  templateUrl:'template.html'
}

}）;

但是在Chrome控制台中我遇到了错误：

angular.js:30 Error: <image> attribute height: Expected length, "{{imgHeight}}p…".
angular.js:30 Error: <path> attribute d: Expected number, "M0,0 L 0, {{pathOne}} {{pa…".

如何解决这个问题？

Answer 1

使用ngAttr绑定到任意属性

来自文档：

  

Web浏览器有时会对它们认为对属性有效的值感到挑剔。

     

例如，考虑这个模板：

<svg>
  <circle cx="{{cx}}"></circle>
</svg>

     

我们希望AngularJS能够绑定到此，但是当我们检查控制台时，我们会看到类似Error: Invalid value for attribute cx="{{cx}}"的内容。由于SVG DOM API的限制，您不能简单地编写cx="{{cx}}"。

     

使用ng-attr-cx，您可以解决此问题。

     

如果带有绑定的属性以ngAttr前缀为前缀（非规范化为ng-attr-），则在绑定期间，它将应用于相应的未加前缀的属性。这允许您绑定到浏览器急切处理的属性（例如SVG元素的circle[cx]属性）。使用ngAttr时，会使用$interpolate的allOrNothing标记，因此如果插值字符串中的任何表达式生成undefined，则该属性将被删除而不会添加到该元素中

     

例如，我们可以通过编写：

来修复上面的示例

<svg>
  <circle ng-attr-cx="{{cx}}"></circle>
</svg>

     

— AngularJS Developer Guide - Interpolation