1. ホーム
  2. javascript

[解決済み] AngularJS - テンプレートURLの生成で$routeParamsを使用するには?

2023-01-23 14:02:56

質問

私たちのアプリケーションは2レベルのナビゲートを持っています。私たちはAngularJS $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 サービスを注入して使用する方法を見つけることができませんでした (これはより良い解決策であると推測されます)。

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 を使って、このように設定します。

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>