SVG折线坐标干扰Angularjs RouteParams答案

【问题标题】：SVG polyline coordinates interfering with Angularjs RouteParamsSVG折线坐标干扰Angularjs RouteParams
【发布时间】：2017-03-14 02:17:08
【问题描述】：

我有一张座位图，它会根据所选座位区在新视图中打开。一切似乎都在控制台中工作，我已经测试了 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];
        }
    }
};

【问题讨论】：

标签： angularjs svg polyline

【解决方案1】：

根据您配置路由的方式，您可能只需将 <a> 元素更改为使用绝对 URL。

请参阅：Angular and SVG filters 了解更多信息。

还有。 SVG <a> 元素与 HTML <a> 元素并不完全相同。你真的应该使用<a xlink:href""...>，不是 <a href=""..>。

【讨论】：