我有一张座位图,根据所选的座位区域在新视图中打开。一切似乎都在控制台中工作,我测试了SVG元素之外的路径,但由于SVG折线,它不会正确路由到正确的路径。我知道我可以制定一个指令,但我对Angularjs很新。任何建议都将不胜感激。
模板
<div class="row margin-bottom20">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 text-center">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 998">
<image width="1200" height="998" xlink:href="img/keyarena-price-map.png" transform="matrix(1 0 0 1 1 0)">
</image>
<a href="#/section/{{ section._id }}" ng-repeat="section in sections">
<polyline id="{{ section.polyline }}" fill="#f8f6ec" opacity="0" ng-attr-points="{{ section.points }}" />
</a>
</svg>
</div>
</div>
App.js
var ticketsApp = angular.module('ticketsApp', ['ngRoute']);
ticketsApp.factory('$sections', sectionsService);
ticketsApp.config(function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'templates/main.html',
controller: 'TicketsController'
}).
.....many more routes.....
when('/price-map', {
templateUrl: 'templates/price-map.html',
controller: 'TicketsController'
}).
when('/section/:id', {
templateUrl: 'templates/price-map-details.html',
controller: 'TicketDetailsController',
reloadOnSearch: false
});
});
ticketsApp.controller('TicketsController', function($scope, $sections) {
$scope.sections = $sections.getAll();
});
ticketsApp.controller('TicketDetailsController', function($scope, $sections, $location, $routeParams) {
$scope.section = $sections.getById(parseInt($routeParams.id, 10));
});
Services.js
var sectionsService = function() {
var sections = [{
_id: 10123,
polyline: "101-upper",
points: "357,168 320.5,37 367.5,23 408,20 509.5,20 509.5,156.5 421.5,156.5 385.5,160.5",
url: "http://www.badcasserole.com/StormSeatViews/Section%20101%20Row%2023.htm",
title: "Section 101 Upper",
group: "",
membership: "",
single: ""
},
.... many more elements .....
{
_id: 12700,
polyline: "cs-127",
points: "689.332,324 781.332,324 807.666,331 826.666,340 826.666,362.334 689.332,362.334",
url: "http://www.badcasserole.com/StormSeatViews/Section%20127%20Row%20CC.htm",
title: "Courtside - Section 127",
group: "",
membership: "",
single: ""
}
];
return {
getAll: function() {
return sections;
},
getById: function(id) {
for (var i = 0; i < sections.length; ++i) {
if (sections[i]._id === id) {
return sections[i];
}
}
return sections[i];
}
}
};
答案 0 :(得分:0)
根据您配置路由的方式,您可能只需要更改<a>
元素以使用绝对网址。
有关详细信息,请参阅:Angular and SVG filters。
另外。 SVG <a>
元素与HTML <a>
元素不完全相同。您应该使用<a xlink:href""...>
,不 <a href=""..>
。