ng-repeatがSnap svg zpdで動作しない

Snap svg zpdで有効になっているSVGコンテナでng-repeatを使用して複数の長方形を読み込もうとしています。四角形はUIでレンダリングされません。私はスナップSVGを削除し、SVGのZPDをスナップした場合 ng-repeatがSnap svg zpdで動作しない

、矩形が描画さばかりしている：Plunkerリンクが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%20static%20routing%20config.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(); 

});

コンソールのエラーが取り付けられています。ちょうどNG-ATTR-X = "{{ar.x + 30}}" NG-ATTR-Y = "{{ar.x + 150}}" からブレースを取り外す必要がある

出典

2016-10-17 Saiteja Y

投稿答えを試してみてください。 – Jigar7521

@ JigarPrajapati私はそれを試しました、問題は同じままです。 ng-repeatで長方形を読み込むことはできません。 –

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%20static%20routing%20config.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>

出典

2016-10-17 11:44:37 Jigar7521

結果は同じです –

これは私がsvgを読み込むことについての問題だと思います – Jigar7521

ng-repeatがSnap svg zpdで動作しない

答えて

関連する問題