如何使用ngRoute在templateUrl中使用URL參數？

Question

我正在構建一個angularjs應用程序，我的app.js看起來像這樣。但是，它會拋出Unknown provider: $routeParams錯誤。任何想法爲什麼？

var angularSite = angular.module('angularSite', [ 
    'ui.router', 
    'ngRoute', 
    'siteController', 
    'siteDirectives' 
]) 
.config(['$routeProvider', '$routeParams', 
    function($routeProvider,$routeParams) { 
    $routeProvider. 
     when('/Projects', { 
     templateUrl: 'partials/projects.html', 
     controller: 'ProjectController' 
     }). 
     when('/Projects/:projectId', { 
     template: 'partials/pages/'+$routeParams.projectId+'.html', 
     controller: 'ProjectDetailController' 
     }). 
     otherwise({ 
     redirectTo: '/About' 
     }); 
    }]); 

Answer 1

可用於AngularJS 1.2訪問路徑參數在配置級別替換。

template: 'partials/pages/'+$routeParams.projectId+'.html', 

有：

templateUrl: function(params){ return 'partials/pages/' + params.projectId + 'html'; } 

源 - AngularJS - How to use $routeParams in generating the templateUrl?

Answer 2

在角度模塊的配置是不允許使用的服務。 $ routeParams是一項服務，所以你不能在那裏使用它。

我建議你通過你的控制器包含一個或另一個模板ProjectDetailController。 在此控制器中，您可以注入並使用服務$ routeParams，以選擇一個或另一個模板。喜歡的東西：

所以，你的配置：

when('/Projects/:projectId', { 
    template: 'partials/pages/main.html', 
    controller: 'ProjectDetailController' 
    }). 

你的控制器：

Controller.$inject = ['$routeParams']; 

/* @ngInject */ 
function Controller($routeParams) { 
    var vm = this; 
    vm.template = 'partials/pages/'+$routeParams.projectId+'.html'; 
} 

而且你的main.html中的模板：

<ng-include src="vm.template"/> 

Answer 3

$routeParams是一種服務，可以不是被注入.config。

如果你想設置您templateUrl從網址參數，正確的方法是用一個函數來設置templateUrl（如下）：

.when('/Projects/:projectId', { 
    templateUrl: function(params) { // <-- 
     return 'partials/pages/' + params.projectId + '.html'  
    }, 
    controller: 'ProjectDetailController' 
})