如何使用ng-attr处理patternTransform？ （保持它的状态）

Question

我有一个包含此SVG元素的模板

<pattern ng-attr-patternTransform="translate({{ example }}, 0)" etc >…</pattern>

产生这个：

<pattern ng-attr-patterntransform="translate({{ example }}, 0)" patterntransform="translate(-45, 0)" etc >…</pattern>

如何保留camelcased名称？

我也尝试使用替代语法

ng-attr="'patternTransform=translate({{ example }}, 0)'"

无济于事。

我做错了什么？

Answer 1

Since version 1.3.7，AngularJS支持camelcased属性。您只需要在大写字母前加下划线。

ng-attr-pattern_transform=""

Answer 2

AFAIK，angularjs尚不支持区分大小写的属性。但有人试图让它特别适用于SVG。请参阅#1925进行讨论。

作为一种解决方法，您可以编写一个自定义指令来保留@stanleygu在此comment中建议的属性大小写。

.directive('caseSensitive', function() {
  return {
    link: function(scope, element, attr) {
      scope.attr = attr;
      var caseSensitive = attr.caseSensitive.split(',');
      angular.forEach(caseSensitive, function(a) {
        var lowercase = a.toLowerCase();
        scope.$watch('attr[lowercase]', function() {
          element[0].setAttribute(a, element[0].getAttribute(lowercase));
        });
      });
    }
  };
})

然后像这样使用它：

<pattern case-sensitive="patternTransform" ng-attr-patternTransform="translate({{ example }}, 0)" etc >…</pattern>

希望这有帮助。