9

我有一个类似的路由，它应该根据参数是否为数字来加载不同的视图和控制器。例子：

  • /artists/2应该ArtistsIndexController有一个看法/www/artists/index.html
  • /artists/name应该ArtistsProfileController有一个看法/www/artists/profile.html

理想情况下，我会使用类似的东西：

$routeProvider.when("/artists/:page", {
  templateUrl: "/www/artists/index.html",
  controller: "ArtistsIndexController"
});

$routeProvider.when("/artists/:name", {
  templateUrl: "/www/artists/profile.html",
  controller: "ArtistsProfileController"
});

哪里:page是数字，:name不是。

注意我看到了一个相关的github 问题（从这个问题中找到），但我想知道是否有解决方案或首选解决方案。

4

3 回答 3

5

另一种方法是使用支持正则表达式的ui-router路由（在许多其他事物中），这将允许：

$stateProvider.state("artists-index", {
  url: "/artists/{page:[0-9]*}",
  templateUrl: "/www/artists/index.html",
  controller: "ArtistsIndexController"
});

$stateProvider.state("artists-profile", {
  url: "/artists/{name}",
  templateUrl: "/www/artists/profile.html",
  controller: "ArtistsProfileController"
});
于 2013-11-05T19:05:38.373 回答
3

我使用了一个讨厌的黑客，包括更改正则表达式

var $route = $routeProvider.$get[$routeProvider.$get.length-1]({$on:function(){}});


$routeProvider.when("/artists/:page", {
  templateUrl: "/www/artists/index.html",
  controller: "ArtistsIndexController"
});

$routeProvider.when("/artists/:name", {
  templateUrl: "/www/artists/profile.html",
  controller: "ArtistsProfileController"
});

$route.routes['/artist/:page'].regexp = /^\/(?:artist\/(\d+))$/
$route.routes['/artist/:page/'].regexp = /^\/(?:artist\/(\d+))\/$/

它很难看，但效果很好。您可以更改路线的正则表达式以使它们匹配您想要的任何内容。

于 2014-07-21T12:21:23.647 回答
1

我现在将其用作解决方案，并且会对替代方案感兴趣！

1）创建一个通用模板，它将加载到控制器中并动态查看：

<div ng-controller="controller" ng-include src="templateUrl"></div>

在这个例子中，我把这个视图放在/www/shared/dynamic-controller.html

2) 创建一个控制器，检查路由参数以确定要加载哪个控制器和视图：

angular.module('appName').
  controller('ArtistsDynamicRouteController', ['$scope', '$controller', '$routeParams', function($scope, $controller, $routeParams) {
    if(/^\d+$/.test($routeParams.pageOrId)) {
      // when pageOrId is a page (number) we want to load the ArtistsIndexController
      $scope.controller = $controller('ArtistsIndexController', { $scope: $scope }).constructor;
      $scope.templateUrl = '/www/artists/index.html';
    } else {
      // when pageOrId is an id (non-number) we want to load the ArtistsProfileController
      $scope.controller = $controller('ArtistsProfileController', { $scope: $scope }).constructor;
      $scope.templateUrl = '/www/artists/profile.html';
    }
  }]);

3) 无论参数类型如何，都使用一条路由：

// handles both /artists/2 and /artists/username
$routeProvider.when("/artists/:pageOrName", {
  templateUrl: "/www/shared/dynamic-controller.html",
  controller: "ArtistsDynamicRouteController"
});
于 2013-08-08T17:00:54.763 回答