我们的应用程序具有2级导航。我们想使用AngularJS $routeProvider动态地向提供模板<ng-view />。我正在考虑做一些类似的事情:
$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以便动态提供模板?
<<>>
我找不到注入和使用该$routeParams服务的方法(我认为这是一个更好的解决方案),我尝试过这种想法,认为它可能会起作用:
$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如下所示:
templateUrl
ng- include
$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
urlRouter.html
<div ng-include src="templateUrl"></div>