I have a seating map that opens in a new view based on the seating section selected. Everything seems to be working in the console, and I have tested the routes outside of an SVG element, but it won't route to the correctly because of the SVG polyline. I know there's a directive I can draw up, but I'm very new to Angularjs. Any suggestions would be greatly appreciated.
Template
<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];
}
}
};
