標準のウィジェットがあなたのニーズに合わない場合は、あなたが望む機能にピッタリのカスタム ウィジェットをご自身で作成できます。作成後、カスタムウィジェットはデザイン中のページ、フォームまたはフラグメント内のパレットで利用可能になります。

カスタム ウィジェットは、次から構成されます：

• ウィジェットの概要を記述した説明
• ウィジェットによって公開されたプロパティ
• ウィジェットの HTML マークアップを記述したテンプレート
• ウィジェットのロジックを記述したコントローラー
• ウィジェットが外部のJavaScript ライブラリ、CSS 定義、またはイメージを使用する場合のいくつかのアセット（リソース）
• ウィジェットが AngularJS フレームワークに組み込まれていないサービス、またはディレクティブを使用する場合のAngularJS モジュールの宣言

カスタム ウィジェットの実装は、 AngularJS フレームワークに基づきます。カスタム ウィジェット エディタを開いて新規のカスタムウィジェットを作成する場合、これらの概念を基本的な使用法を示す簡単なサンプルが表示されます。

より詳しい情報は、テンプレートとコントローラーに関する AngularJS ガイドを参照してください。

現在のところ、カスタム ウィジェットのコンテナは実装できません。

カスタム ウィジェットのプロパティ

プロパティは、カスタム ウィジェットのページ、フォーム、またはフラグメントへの追加時に、そのプロパティ パネルでセットできる変数です。プロパティのタイプは、コンスタント、動的な値、双方向バインド、または補完（interpolation）です。ウィジェット プロパティを編集する際にそれらの「値の取り扱い」を選択できます。あなたが作成したウィジェットを利用する人が、そのウィジェットの外観や挙動をカスタマイズするときに、これらのプロパティが使用されます。カスタム ウィジェット内のプロパティは、そのテンプレート内、またはコントローラー内のいずれかで使用できます。

プロパティは、コントローラーやテンプレート内で参照可能な「名前」、エディタ内のプロパティ パネルにプリントされる「ラベル」、「デフォルト」値、タイプを持ちます。プロパティのタイプは次のとおりです。

• text ： 利用者はテキストを使用してプロパティ値を指定します
• choice ： 利用者はあなたが定義したリストからプロパティ値を選択します
• html ： 利用者は基本の HTML タグを含むテキストを使用してプロパティ値を指定します
• integer ： プロパティ値は整数です
• boolean ：プロパティ値はブーリアンです
• collection ：プロパティ値は配列です

これらのそれぞれのタイプは、カスタム ウィジェットの利用者がプロパティの値を変数にバインドできるようにします。

カスタム ウィジェット内で外部 AngularJS のディレクティブまたはサービスを使用する

多くの Angular ライブラリがインターネット上で利用可能です。カスタム ウィジェットに使用できます。そうするには、あなたが使用したいライブラリをダウンロードし、カスタム ウィジェットに JavaScript アセットとして追加します。ダウンロードされたライブラリは、あなたのアプリケーションに追加するモジュール（「必要な AngularJS モジュール」のフィールドにカスタム ウィジェット定義に追加するモジュールを追加）を指定します。

現在、インポートされたライブラリのディレクティブおよびサービスは、関数の引数にそれらを差し挟む（例： function($scope, myImportedService)）ことによって、ディレクティブはテンプレート内で、サービスはコントローラー内で使用できます。

より高度な使用例

このセクションでは、 ui.bootstrap ライブラリの carousel と slide のディレクティブの使用方法を解説します。

ui.bootstrap のドキュメントに従い ui-bootstrap-tpls.min.js をダウンロードし、アプリケーションの依存性として ui.bootstrap モジュールを宣言します。具体的には、次の手順でカスタム ウィジェット内でこれらのディレクティブを使用できるようにします：

1. ui-bootstrap-tpls.min.js.をダウンロードします
2. それをローカルな JavaScript アセットとしてカスタム ウィジェットに追加します
3. 「必要な AngularJS モジュール」のフィールドに ui.bootstrap モジュールを宣言します

これで、あなたのテンプレート内で carousel と slide ディレクティブを使用できます。以下に carousel に対するテンプレートとコントローラーでの単純な使用例を示します。

テンプレート：:

Controller: