Question

现在使用像 test.com /＃/ album / 0 / the-slug-here 这样的网址可以正常使用，但我正在努力实现 test.com /＃/专辑/的段塞-此处

<a ng-href="#/album/{{$index}}/{{project.slug}}">{{project.title}}</a>

(function() {
var app = angular.module('chp', ['ngRoute', 'projectControllers']);

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'partials/directory.html',
        controller: 'ProjectsCtrl'
      }).
      when('/album/:id', {
        templateUrl: 'partials/album.html',
        controller: 'ProjectDetailCtrl'
      }).
      when('/album/:id/:slug', {
        templateUrl: 'partials/album.html',
        controller: 'ProjectDetailCtrl'
      }).
      otherwise({
        redirectTo: '/'
      });
  }]);

var projectControllers = angular.module('projectControllers', []);

projectControllers.controller('ProjectsCtrl', ['$scope', '$http',
  function ($scope, $http) {
    $scope.projects = albums;
    $scope.filters = { };
  }]);

projectControllers.controller('ProjectDetailCtrl', ['$scope', '$routeParams', '$sce',
  function($scope, $routeParams, $sce) {
    $scope.project = albums[$routeParams.id];
}]);

当我删除id但尝试链接到slug时，它没有加载数据。我到目前为止工作的唯一方法是添加包含两者的第二条路线。有没有办法摆脱网址中的索引？

Answer 1

您需要删除:id的路线并替换为:\slug的路线，您只需从相册中过滤相册即可获得索引;

你可以这样做：

在路由器中：

  when('/album/:slug', {
    templateUrl: 'album.html',
    controller: 'ProjectDetailCtrl'
  }).

在控制器中

  function($scope, $routeParams, $sce) {
    albums.some(function(album, idx){
       /*Search for a match*/
       if(album.slug === $routeParams.slug){
         /*Match found, set album and its index and break out*/
         $scope.album = album;
         $scope.albumIdx = idx;
         return true;
       }
    });

<强> Plnkr

Shim support for Array.some for older browsers here

AngularJS - 如何从URL中删除索引

1 个答案: