AngularJSのテンプレートからencodeURIComponentを呼び出す方法【カスタムフィルター活用】

AngularJSのテンプレート内でencodeURIComponentを呼び出したい場合、カスタムフィルターを作成するのが最もシンプルで効果的な方法です。AngularJSのテンプレート式からは、windowオブジェクトなどのJavaScriptのグローバル関数に直接アクセスできないため、フィルターとしてラップして利用する必要があります。

HTML側の実装例

以下は、作成したフィルターをHTMLテンプレート内で使用する例です。

<div ng-app="app">
  <a href="/foo/{{ 'bar&baz' | encodeURIComponent }}">Demo</a>
</div>

パイプ（|）を使って文字列bar&bazをフィルターに渡すことで、URLエンコードされた結果がリンクのパスに反映されます。

AngularJS側のフィルター定義

続いて、encodeURIComponentを呼び出すカスタムフィルターをAngularJS側で定義します。

var app = angular.module('app', []);
app.filter('encodeURIComponent', function() {
  return window.encodeURIComponent;
});

コードのポイント

この実装のポイントは以下の通りです。

• app.filter()メソッドを使い、encodeURIComponentという名前のカスタムフィルターをモジュールに登録しています。
• フィルター関数はwindow.encodeURIComponentをそのまま返すため、パイプで渡された文字列が自動的にURLエンコードされます。
• 上記の例では、bar&bazという文字列がbar%26bazに変換され、URL内で安全に使用できるようになります。

このようにフィルターを一度定義しておけば、テンプレート内の任意の箇所で{{ 値 | encodeURIComponent }}という形式でURLエンコードを簡単に適用できます。クエリパラメータを動的に生成する場合など、特殊文字を含む文字列をURLに埋め込む際に特に便利です。