Cách sử dụng tham số URL trong templateUrl bằng cách sử dụng ngRoute?

Question

Tôi đang xây dựng một ứng dụng angularjs, app.js của tôi trông như thế này. Tuy nhiên, nó ném lỗi Unknown provider: $routeParams. Bất kỳ ý tưởng tại sao?

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

Có sẵn trong các tham số tuyến đường truy cập AngularJS 1.2 ở mức cấu hình thay thế.

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

với:

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

nguồn - AngularJS - How to use $routeParams in generating the templateUrl?

Answer 2

Trong cấu hình của một mô-đun góc không được phép sử dụng dịch vụ. $ routeParams là một Dịch vụ nên bạn không thể sử dụng nó ở đó.

Tôi khuyên bạn nên bao gồm một mẫu hoặc mẫu khác thông qua bộ điều khiển của bạn ProjectDetailController. Trong bộ điều khiển này, bạn có thể tiêm và sử dụng dịch vụ $ routeParams, để chọn một mẫu hoặc một mẫu khác. Một cái gì đó như:

Vì vậy, cấu hình của bạn:

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

điều khiển của bạn:

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

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

Và mẫu main.html của bạn:

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

Answer 3

$routeParams là một dịch vụ và có thể không phải được tiêm vào .config.

Nếu bạn muốn thiết templateUrl của bạn từ URL params, cách chính xác là sử dụng một chức năng để thiết lập các templateUrl (như sau):

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