Jak używać parametru URL w templateUrl za pomocą ngRoute?

Question

Buduję aplikację angularjs, mój app.js wygląda tak. Jednak powoduje błąd Unknown provider: $routeParams. Każdy pomysł, dlaczego?

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

Dostępne w parametrach trasy dostępu AngularJS 1.2 przy zmianie poziomu konfiguracji.

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

z:

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

źródłowy - AngularJS - How to use $routeParams in generating the templateUrl?

Answer 2

W konfiguracji z modułem Kątowymi nie wolno korzystać z usług. $ routeParams to usługa, więc nie możesz jej tam użyć.

Polecam dołączenie jednego lub drugiego szablonu do kontrolera ProjectDetailController. W tym kontrolerze można wprowadzić i użyć usługi $ routeParams, aby wybrać jeden lub inny szablon. Coś jak:

Więc twój config:

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

Kontroler:

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

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

A szablon main.html:

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

Answer 3

$routeParams jest usługą i mogą nie należy wtryskiwać w .config.

Jeśli chcesz ustawić templateUrl z URL params, poprawna sposobem jest użycie funkcji ustawić templateUrl (jak poniżej):

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