CODEWITHSUNDEEP
javascriptangularjssvgattributes
Knu
Knu

Reputation: 15136

How to handle patternTransform using ng-attr? (keep it camelcased)

I have a template which contains this SVG element

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

which produces this:

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

How can I preserve the name camelcased?

I also tried using an alternative syntax

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

to no avail.

What am I doing wrong?

Upvotes: 1

Views: 1041

Answers (2)

Knu
Knu

Reputation: 15136

Since version 1.3.7, AngularJS supports camelcased attributes. You just need to prefix the uppercased letters with an underscore.

ng-attr-pattern_transform=""

Upvotes: 4

runTarm
runTarm

Reputation: 11547

AFAIK, angularjs doesn't support the case-sensitive attribute yet. But there are attempts to make it works especially for SVG. Please see #1925 for a discussion.

As a workaround, you could write a custom directive to preserve the attribute case as suggested by @stanleygu in this 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));
        });
      });
    }
  };
})

Then use it like this:

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

Hope this helps.

Upvotes: 1

Related Questions