CODEWITHSUNDEEP
angularjssvg
Pranjal
Pranjal

Reputation: 463

add svg element at runtime in angular with 2 way data binding

I want to add svg element line at runtime with ng-attr-x1={{some scope varaible}}. I tried 2 ways: In 1 way I tried with $compile:

var g=angular.element(document.createElementNS("http://www.w3.org/2000/svg", "g"));
var line=$compile('<line ng-attr-x1={{$scope.array[array.length-1].x1}} ng-attr-y1={{$scope.array[array.length-1].y1}} ng-attr-x1={{$scope.array[array.length-1].x2}} ng-attr-x1={{$scope.array[array.length-1].y2}} style="with mandatory styling for line">')($scope);
g.append(line);
parentg.append(g);

In this method line is not showing and g is showing with 0px height and width.

In a 2 way I treid like :

var line=angular.element(document.createElementNS("http://www.w3.org/2000/svg", "line"));
line.attr('ng-attr-x1','scopeVariable');
line.attr('ng-attr-x2','scopeVariable');
line.attr('ng-attr-y1','scopeVariable');
line.attr('ng-attr-Y2','scopeVariable');

In this ng-attr attributes does not resolved to x and y. In DOM it shows as

Upvotes: 0

Views: 1040

Answers (1)

Thomas
Thomas

Reputation: 56

This is possibly coming in way too late to help you, but I was stuck for a little while on the same question.

Turns out that $compile can take an element created with document.createElementNS() - like this:

var actApp = angular.module('actApp', []);

actApp.controller('shapeController', ['$scope', '$compile',
  function shapeController($scope, $compile) {
    $scope.color = 'green';

    var svgEle = $(document.getElementById('mySvgElement'));

    var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');

    line.setAttribute('x1', '0');
    line.setAttribute('x2', '0');
    line.setAttribute('x2', '20');
    line.setAttribute('y2', '20');

    line.setAttribute('style', 'stroke: {{color}};');

    svgEle.append($compile(line)($scope));
  }
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="actApp">
<div ng-controller="shapeController">
  <input type="button" ng-click="color='blue'" value="To blue" />

  <br />

  <svg id="mySvgElement" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">

  </svg>

</div>
  </div>

Hope this saves someone a little bit of time in the future.

Upvotes: 1

Related Questions