带有双大括号 {{ }} 的插值绑定导致属性错误
Interpolation binding with double curly brackets {{ }} causing errors in attributes
我有模板:
<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…".
如何解决?
使用 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>
我有模板:
<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…".
如何解决?
使用 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 writecx="{{cx}}"
.With
ng-attr-cx
you can work around this problem.If an attribute with a binding is prefixed with the
ngAttr
prefix (denormalized asng-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'scircle[cx]
attributes). When usingngAttr
, theallOrNothing
flag of $interpolate is used, so if any expression in the interpolated string results inundefined
, 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>