javascript - AngularJS - 如何使用 $routeParams 生成 templateUrl？

我们的应用程序有 2 级导航。我们想使用 AngularJS $routeProvider 动态地为 <ng-view /> 提供模板。我正在考虑做一些类似的事情:

angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/:primaryNav/:secondaryNav', {
        templateUrl: 'resources/angular/templates/nav/'+<<primaryNavHere>>+'/'+<<secondaryNavHere>>+'.html'
    });
}]);

我只是不知道如何填充 <<>> 中的部分。我知道primaryNav 和secondaryNav 绑定(bind)到$routeParams，但是如何在此处访问$routeParams 以动态提供模板？

最佳答案

我找不到注入(inject)和使用 $routeParams 服务的方法(我认为这是一个更好的解决方案)我试过这个认为它可能有效:

angular.module('myApp', []).
    config(function ($routeProvider, $routeParams) {
        $routeProvider.when('/:primaryNav/:secondaryNav', {
            templateUrl: 'resources/angular/templates/nav/'+$routeParams.primaryNav+'/'+$routeParams.secondaryNav+'.html'
        });
    });

这产生了这个错误:



如果这样的事情是不可能的，您可以将 templateUrl 更改为指向只有 ng-include 的部分 HTML 文件，然后使用 $routeParam 设置 Controller 中的 URL，如下所示:

angular.module('myApp', []).
    config(function ($routeProvider) {
        $routeProvider.when('/:primaryNav/:secondaryNav', {
            templateUrl: 'resources/angular/templates/nav/urlRouter.html',
            controller: 'RouteController'
        });
    });

function RouteController($scope, $routeParams) {
        $scope.templateUrl = 'resources/angular/templates/nav/'+$routeParams.primaryNav+'/'+$routeParams.secondaryNav+'.html';
    }

以此作为您的 urlRouter.html

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

关于javascript - AngularJS - 如何使用 $routeParams 生成 templateUrl？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11534710/