Snap.svg with Angularjs

[Alina Grin]

Hi everybody,

Someone have en example of working of snap.svg with angularjs? Something simple...

Thanks a lot!

[Thorsten Reitz]

Hi Alina,

Your post is two weeks old, but maybe you are still interested. We've been building an Angular.JS app that ueses snap.svg quite a lot. We have a couple of directives that embed the <svg> element and then operate on it, like this one:

wetfMapping.directive('wetfMapping', function($timeout) {
    return {
      restrict: 'E',
      require: 'ngModel',
      scope: {},
      template: '<svg class="svgContainer"></svg>',
      link: function (scope, element, attrs, ngModel) {
          ngModel.$render = function() {
            scope.cell = ngModel.$viewValue;
            if (angular.isDefined(scope.cell)) {
              drawMapping(...);
            }
          };
      }
    };
  });

In the drawMapping function, the Snap object is instantiated on the SVG element and then the actual set up of the SVG happens according to the ngModel state. Tell me if you need more info.

All the best,

Thorsten

[Alina Grin]

Throsten thanks for your reply it's still relevant.

I'm looking for something very simple...just a simple example.

I want remove all script data that located at html file to my js controller.

for example:

html:

<svg height="600px" id="svg" style="width:100%; border:1px dashed black"> </svg>

script:

<script>

    var s = Snap('#svg');

    var p = s.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({

        fill: "none",

        stroke: "#bada55",

        strokeWidth: 2

    });

    p = p.pattern(0, 0, 10, 10);

    var rect = s.rect(5, 5, 40, 40, 5);

    rect.attr({

        fill: p,

        stroke: 'grey',

        strokewidth: 1,

    });

How can I relocate/translate the script to funcrion in my controller. Thank you a lot.

[jo...@jsink.co]

I am getting the following error:

Error: Failed to execute 'querySelector' on 'Document': '[object Object]' is not a valid selector.

    at Error (native)

    at Snap (http://localhost:3000/lib/snap.svg/dist/snap.svg.js:841:26)

directive

html

html:

[jo...@jsink.co]

sorry for ridiculous attempt at pasting in editor earlier :(

this works:

http://jsfiddle.net/hRy4A/2/