Question

我已将多个路线的单页网站放在一起。通过ng-view，所有主要路径（页面）都可以正常工作。但是，在其中一个路径中，有一些可链接的元素在一个单独的视图中打开，每个部分都有自己的id。子路线，如果你愿意的话。那些不起作用。这是LINK。

Appreviated Index Page

<!doctype html>
<html class="no-js" lang="en" ng-app="ticketsApp">
    <head>
        <!-- Angular JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
        <script src="js/angular-route.min.js"></script>
        <script src="js/sections.js"></script>
        <script src="js/app.js"></script>
    </head>

    <body>
        <div ng-view="true"></div>
    </body>

主要模板

<div>
    <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 ng-href="#/section/{{ section._id }}" ng-repeat="section in sections"><polyline id="{{ section.polyline }}" fill="#fff" opacity="0" points="{{ section.points }}" /></a>
    </svg>
</div>

详情模板

    <div>
        <iframe class="embed-responsive-item" allowfullscreen style="border-style:none;" ng-src="{{ section.image }}"></iframe>
    </div>

    <div>
        <a href="#/" class="button-back-viewer"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back to Price Map</a>
        <h1>{{ section.title }}</h1>
        <h5>${{ section.group }}</h5>
        <h5>${{ section.membership }}</h5>
        <td><h5>${{ section.single }}</h5></td>
    </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'
        }).

        ....More Routes all with 'TicketsController'.....


        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('StormController', function($scope, $location) {
    $scope.isActive = function(route) {
        return route === $location.path();
    }
});

ticketsApp.controller('TicketDetailsController', function($scope, $sections, $location, $routeParams) {
    $scope.section = $sections.getById(parseInt($routeParams.id, 10));
});

ticketsApp.directive('ngBindHtmlUnsafe', function() {
    return function(scope, element, attrs) {
        scope.$watch(attrs.ngBindHtmlUnsafe, function(v) {
            element.html(v);
        });
    }
});

Sections.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",
            image: "http://www.badcasserole.com/StormSeatViews/Section%20101%20Row%2023.htm",
            title: "Section 101-Upper",
            group: "",
            membership: "",
            single: ""
        },


        .....many more sections......

        {
            _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",
            image: "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 null;
        }
    }
};

无法按ID查看Angularjs路由

0 个答案: