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

问题描述

我们的应用程序有2级导航。我们想使用AngularJS $ routeProvider 来动态地提供模板的＆LT; NG画面/＆GT; 。我在想沿着这行做的事情的：

Our application has 2-level navigating. We want to use AngularJS $routeProvider to dynamically provide templates to an <ng-view />. I was thinking of doing something along the lines of this:

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

我只是不知道如何将＆LT内填充的部分;＆LT;＆GT;＆GT; 。我知道primaryNav和secondaryNav获得绑定到$ routeParams，但我怎么才能动态满足了模板这里访问$ routeParams？

I just don't know how to populate the parts within the <<>>. I know the primaryNav and secondaryNav get bound to the $routeParams, but how do I access $routeParams here in order to dynamically serve up the template?

推荐答案

我无法找到一种方法来注入，并使用$ routeParams服务（我会假设将是一个更好的解决方案），我想这想它可能工作

I couldn't find a way to inject and use the $routeParams service (which I would assume would be a better solution) I tried this thinking it might work:

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

这产生了这个错误：未知提供商：$ routeParams从对myApp

如果这样的事情是不可能的，你可以改变你的templateUrl指向刚刚一直NG-包括，然后设置使用$ routeParams像这样在你的控制器的URL部分HTML文件：

If something like that isn't possible you can change your templateUrl to point to a partial html file that just has ng-include and then set the url in your controller using $routeParams like this:

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>

这篇关于AngularJS - 如何使用$ routeParams在生成templateUrl？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！