[解決済み] 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>
関連
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み] JavaScriptで現在の日付を取得するには?
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] AngularJSで$scope.$watchと$scope.$applyを使用するにはどうすればよいですか?
-
[解決済み] なぜJavaScriptでは!{}[true]がtrueに評価されるのですか?
-
[解決済み] node.jsで文字列のsha1ハッシュを取得するにはどうすればよいですか?
-
[解決済み] リダイレクトされずにHTMLフォームを送信する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] angularjsのルートはオプションのパラメータ値を持つことができますか?
-
[解決済み] Angularjs - 現在の日付を表示する
-
[解決済み] 文字列のn番目の出現箇所を取得するには?
-
[解決済み] なぜ "use strict "はパフォーマンスを10倍向上させるのか?
-
[解決済み] CORS OriginヘッダーとCSRFトークンによるCSRF保護
-
[解決済み] Javascript 空の配列の削減
-
[解決済み] jQueryの$という記号の意味は何ですか?
-
[解決済み] <ng-content>が空かどうかを確認する方法は?(これまでのAngular 2+で)
-
[解決済み] これは純関数ですか?
-
[解決済み] JavaScriptでDIVを表示・非表示にするには?