Angularjs SVG and "d" attribute: how to make it work?

W

webportal2014-02-09 09:30:53

Angular

webportal, 2014-02-09 09:30:53

Please tell me how to make this work?

<html ng-app="myApp">   
    <head>   
        <title><?=$page_title?></title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
  <style>
    path:hover{stroke:red;fill:red;}
  </style>
<script>
var app = angular.module('myApp', []);
app.factory('myMap', function($http) {
   return {
        getRegions: function() {
             return $http.get('/map/paths')
                       .then(function(result) {
                            return result.data;
                        });
        }
   }
});

app.controller('Map', function($scope,myMap) {
    $scope.paths = myMap.getRegions();
});
</script>
    </head>   
    <body ng-controller="Map">
  <svg ng-attr-height="1890" ng-attr-width="800">
    <g transform="scale(5),translate(185,100)">
      <path ng-repeat="region in paths" ng-attr-d="{{region.path}}" stroke="#060606" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill="rgb(176,176,176)" original="rgb(185,185,185)"></path>
    </g>
    	</svg>
    </body>   
</html>

The output is the following code:

<path ng-repeat="region in paths" ng-attr-d="M -55.472999999999999 34.622 L -55.374000000000002 34.802999999999997 -55.738 34.781999999999996 -56.039000000000001 34.884999999999998 -56.039000000000001 34.774999999999999 -56.363999999999997 34.734000000000002 -56.472000000000001 34.597000000000001 -56.363999999999997 34.362000000000002 -56.146000000000001 34.368000000000002 -55.999000000000002 34.244 -55.619 34.207999999999998 Z" stroke="#060606" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill="rgb(176,176,176)" original="rgb(185,185,185)"></path>

That is, the value is substituted and ng-attr-d is not replaced by the d attribute.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

I

ivankomolin, 2014-02-09
@ivankomolin

Working code. If the result of myMap.getRegions() is, for example: [{'path':'test1'}, {'path':'test2'}, {'path':'test3'}], then the following code will be generated in the browser:

<g transform="scale(5),translate(185,100)">
  <!-- ngRepeat: region in paths -->
  <path ng-repeat="region in paths" ng-attr-d="{{region.path}}" ... d="test1">
  </path>
  <!-- end ngRepeat: region in paths -->
  <path ng-repeat="region in paths" ng-attr-d="{{region.path}}" ... d="test2">
  </path>
  <!-- end ngRepeat: region in paths -->
  <path ng-repeat="region in paths" ng-attr-d="{{region.path}}" ... d="test3">
  </path>
  <!-- end ngRepeat: region in paths -->
</g>

Why you get such a result at the output is not at all clear.
Show the full output result, browser name and version.