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

一尘不染

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

javascript

我们的应用程序具有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绑定到$ routeParams，但是如何在这里访问$
routeParams以便动态提供模板？

阅读 306

2020-04-25

共1个答案

一尘不染

我找不到注入和使用该$routeParams服务的方法（我认为这是一个更好的解决方案），我尝试过这种想法，认为它可能会起作用：

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

产生此错误：

未知提供者：myApp中的$ routeParams

如果无法执行类似的操作，则可以将其更改templateUrl为指向刚刚具有的部分HTML文件，ng- include然后使用来在控制器中设置URL，$routeParam如下所示：

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>

2020-04-25