小编典典

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以便动态提供模板?


阅读 338

收藏
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