AngularJS directive with replacing

Question

I've developed AngularJS directives to add rectangle into SVG document:

  <svg version="1.1" width="200" height="100">

<g>
  <!-- Works -->
  <g dir-rect1="" viz-settings="settings.rect1" />
  <!-- Doesn't work -->
  <g dir-rect2="" viz-settings="settings.rect2" />
</g>

The only difference is between the directives is that the dir-rect1 directive doesn't use replace and the dir-rect2 directive use:

app.directive('dirRect2', function($compile) {
  return {
    restrict: 'AE',
    scope: {
      vizSettings: '=',
    },
    replace:true, // <--- DOESN'T WORK
    template: '<rect fill="{{vizSettings.fill}}" stroke="{{vizSettings.fill}}" width="{{vizSettings.width}}" height="{{vizSettings.height}}" />',
    link: function($scope, elem, attr, ctrl) {
      console.debug($scope);
    }
  };
});

Why when I use replacing in my dirRect2 directive, I cannot see a rect? It seems that generated code is right in both cases. You can see example on plunker.

Be careful with replace in angular is deprecated.

Carlos Verdes
– Carlos Verdes

2014-12-23 12:06:08 +00:00
Commented Dec 23, 2014 at 12:06 — Carlos Verdes
– Carlos Verdes, Commented Dec 23, 2014 at 12:06

Carlos Verdes · Accepted Answer · 2014-12-23 12:09:06Z

1

Two things:

replace is deprecated so, I don't recommend you to use it
replace copy the attributes to the children, and that is your problem.

The second directive generates this:

<rect fill="#111111" stroke="#111111" width="10" height="20" dir-rect2="" viz-settings="settings.rect2" class="ng-isolate-scope"></rect>

And it seems that dir-rect2 and viz-settings is breaking the svg in some way... if you remove this attributes with the same code... svg seems to work:

<rect fill="#111111" stroke="#111111" width="10" height="20" ></rect>

answered Dec 23, 2014 at 12:09

Carlos Verdes

3,19724 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

daveoncode · Accepted Answer · 2014-12-23 11:27:19Z

0

in dirRect1 replace is false (default value) and in dirRect2 is true, so you see a different behavior between the two directives.

The rectangle is not displayed since "rect" tag is required to render the shape in svg! (as I just realized since I never played with svg)

(when you define "replace: true" you are telling Angular to remove the original tag on which the directive is applied)

answered Dec 23, 2014 at 11:27

daveoncode

19.7k19 gold badges108 silver badges163 bronze badges

Collectives™ on Stack Overflow

AngularJS directive with replacing

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related