带有双大括号 {{ }} 的插值绑定导致属性错误

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 browsers are sometimes picky about what values they consider valid for attributes.

For example, considering this template:

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

We would expect AngularJS to be able to bind to this, but when we check the console we see something like Error: Invalid value for attribute cx="{{cx}}". Because of the SVG DOM API's restrictions, you cannot simply write cx="{{cx}}".

With ng-attr-cx you can work around this problem.

If an attribute with a binding is prefixed with the ngAttr prefix (denormalized as ng-attr-) then during the binding it will be applied to the corresponding unprefixed attribute. This allows you to bind to attributes that would otherwise be eagerly processed by browsers (e.g. an SVG element's circle[cx] attributes). When using ngAttr, the allOrNothing flag of $interpolate is used, so if any expression in the interpolated string results in undefined, the attribute is removed and not added to the element.

For example, we could fix the example above by instead writing:

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

— AngularJS Developer Guide - Interpolation