Блог

Главная - Вопросы по программированию - ng-repeat не работает с привязкой svg zpd

ng-repeat не работает с привязкой svg zpd

#angularjs #snap.svg

#angularjs #snap.svg

Вопрос:

Я пытаюсь загрузить несколько прямоугольников с помощью ng-repeat в контейнер SVG, который включен с помощью Snap svg zpd. Прямоугольники не отображаются в пользовательском интерфейсе. Ссылка на плунжер прикреплена Snapsvgzpd angular js

 <!DOCTYPE html>
<html ng-app="plunker">

<head>
<meta charset="utf-8" />
<title>AngularJS svg with zoom and pan Plunker</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg.zpd/0.0.11/snap.svg.zpd.js"></script>
<script src="app.js"></script>
 </head>
<body ng-controller="MainCtrl">
<div>
  <svg id="diagram" style="border: solid 1px #ccc; width: 400px; height:400px;" class="svg-drop" height="500px" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g id="group" >
    <image x="0" y="0" width="784" height="391" xlink:href="http://www.slashroot.in/sites/default/files/advanced static routing config.png"></image>
    <rect ng-repeat="ar in arr" ng-attr-x="{{ar.x   30}}" ng-attr-y="{{ar.x   150}}" width="25" height="25" fill="red"></rect>
    <rect x="0" y="0" width="25" height="25" fill="red"></rect>
  </g>
</svg>
</div>
 
 var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
$scope.arr = [{x:10},{x:20},{x:30}];
var paper = Snap("#diagram");
paper.zpd();

});

Ошибка консоли:введите описание изображения здесь

Если я удалю привязку svg и привязку svg zpd, прямоугольники будут отображаться.

введите описание изображения здесь

Комментарии:

1. Попробуйте опубликовать ответ.

2. @JigarPrajapati Я пробовал, проблема остается прежней. Не удается загрузить прямоугольники в ng-repeat.

Ответ №1:

Вам нужно просто удалить фигурные скобки из ng-attr-x=»{{ar.x 30}}» ng-attr-y=»{{ar.x 150}}»

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

app.controller('MainCtrl', function($scope) {
  $scope.arr = [{x:10},{x:20},{x:30}];
  var paper = Snap("#diagram");
  paper.zpd();

}); 
 <!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS svg with zoom and pan Plunker</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg.zpd/0.0.11/snap.svg.zpd.js"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl">
    <div>
      <svg id="diagram" style="border: solid 1px #ccc; width: 400px; height:400px;" class="svg-drop" height="500px" xmlns="http://www.w3.org/2000/svg" version="1.1">
      <g id="group" >
        <image x="0" y="0" width="784" height="391" xlink:href="http://www.slashroot.in/sites/default/files/advanced static routing config.png"></image>
        <rect ng-repeat="ar in arr" ng-attr-x="ar.x   30" ng-attr-y="ar.x   150" width="25" height="25" fill="red"></rect>
        <rect x="0" y="0" width="25" height="25" fill="red"></rect>
      </g>
    </svg>
    </div>
    
  </body>

</html>

Комментарии:

1. Результат тот же

2. Я думаю, что проблема с загрузкой svg