Angular 路线中的动态页面

Question

我正在尝试在 Angular 1.3 中使用动态路由。类似于它描述的内容 here and here。这些例子表明是这样的：

$routeProvider.when('/:group/:pagename', {
    controller: 'RouteCtrl',
    templateUrl: 'uirouter.html'
})

然后控制器将可以通过 $routeParams 访问组和页面名称。行得通

我正在尝试让这个路由更动态一些，并让模板和控制器也能动态选择：

$routeProvider.when('/:group/:pagename', {
    controller: $routeParams.group + 'Ctrl',
    templateUrl: $routeParams.pagename + '.html'
})

当我在 when 上放置断点时，我可以看到 $get 属性的函数将 $routeParams 作为参数之一。但我不知道如何检索它的值。

该项目处于早期阶段 - 我可以使用 ui-router 或 ng-router，如果它们中的任何一个具有此功能。

Answer 1

对于动态 templateUrl 部分，您可以尝试：

$routeProvider.when('/:group/:pagename', {
    controller: "SomeCtrl",
    templateUrl: function(params){return params.pagename + '.html';}
})

但不确定控制器是否也能做到这一点。

Answer 2

您可以声明一个 return 一个 templateUrl 字符串的函数，而不是直接值，即：

$routeProvider.when('/:group/:pagename', {
    controller: $routeParams.group + 'Ctrl',
    templateUrl: function (routeParams) {
        return routeParams.pagename + '.html';
    }
});

我想 controller 可能也是如此，但你必须测试一下，因为我从未将它用于控制器。

也就是说，如果你在这个地方有这么多动态逻辑，也许你可以将这些视图封装为不同的指令和 ng-if 某些指令，而不是将其视为不同的控制器，具体取决于 $routeParams 哪个会被设置在一个wrapping controller中？

Angular 路线中的动态页面

Dynamic page in Angular route

javascript

angularjs

angularjs-routing

angular-ui-router