フォームでデータ送信後に別のページに遷移する際、遷移直後のみ完了メッセージを表示(flashメッセージ)するサンプルを作成しました。
デモとコードサンプルはこちら。
●routeChangeSuccessイベント
$routeサービスを使ってページ遷移が成功するとrouteChangeSuccessイベントがブロードキャストされるので、このイベントを$rootScopeのリスナーで検知し、フォーム送信時に設定したflashメッセージを表示させます。
●サンプルコードの説明
①データ送信
・送信メッセージを”queue”配列に保持。
・”page”ビューに遷移。
このとき、ページ遷移が成功するとrouteChangeSuccessイベントがブロードキャストされる。
(ビュー)
<form ng-submit="submit(message)" class="form-inline">
<input type="text" ng-model="message" autofocus>
<button class="btn">コメント送信</button>
</form>
(コントローラー)
var queue = [];
$scope.submit = function(message) {
queue.push(message);
$location.path("/page");
}
②”$routeChangeSuccess”イベントを検知
・$rootScopeのリスナーで検知すると、”queue”配列に保持されているメッセージを取り出し、”currentMessage”変数に割り当てる。
$rootScope.$on("$routeChangeSuccess", function() {
currentMessage = queue.shift() || "";
});
③flashメッセージを表示
・ng-showディレクティブを使って、値を取得できる場合のみ表示。
・Bootstrapの”bg-success”クラスを使って背景色をスタイル。
(ビュー)
<div class="bg-success" ng-show="getMessage()">
<b>flashメッセージ</b>
<p>{{getMessage()}}</p>
</div>
(コントローラー)
$scope.getMessage = function() {
return currentMessage;
}
関連記事の目次AngularJSの特徴、仕組み
ビルトインディレクティブ
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- ng-repeatを使ってリスト、テーブル、フィルター
- ng-includeを使って別のHTMLファイルを埋め込み
- ng-switchを使って内部にあるHTMLテンプレートの表示を切り替え
- ng-if、ng-show、ng-hideを使って表示、非表示を切り替え
- ng-class、ng-styleを使ってCSSを設定
- イベント処理
- 有効、無効を切替えるディレクティブ
- フォームの入力チェックを行い、動的にCSS追加
- ng-optionsを使ってSelectメニューを作成
- ng-repeatを使ってラジオボタンを作成
- ビルトインのフィルターの使用方法
- ビルトインのフィルターで関数を使用
- カスタムフィルターの使用方法
- Bootstrap3を使ってページング
- スクリプト内でフィルターを使用、既存のフィルターを拡張
サービス
- サービスの概要とfactory、service、providerの使い分け
- $qサービスでpromise/deferredパターン
- $httpサービスの概要、サーバーからJSONデータ取得
- $httpサービスのPOSTでデータ送信
- $qサービスを使ってhttpリクエストを複数実行
- $httpサービスのinterceptorの使用方法
- AngularJSのwithCredentialsの設定、CORS
- $timeoutサービスと$intervalサービス
- $resourceサービスを使ってREST
- $locationサービスを使ってURLを操作
- $routeサービスと$resourceサービスを使ったサンプルを作成
- routeChangeSuccessを使ってflashメッセージ表示
- JavaScript、CSSを含むHTMLデータをバインドして表示
カスタムディレクティブ
AngularJSの特徴、仕組み
ビルトインディレクティブ
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- ng-repeatを使ってリスト、テーブル、フィルター
- ng-includeを使って別のHTMLファイルを埋め込み
- ng-switchで内部にあるHTMLテンプレートの表示を切り替え
- ng-if、ng-show、ng-hideを使って表示、非表示を切り替え
- ng-class、ng-styleを使ってCSSを設定
- イベント処理
- 有効、無効を切替えるディレクティブ
- フォームの入力チェックを行い、動的にCSS追加
- ng-optionsを使ってSelectメニューを作成
- ng-repeatを使ってラジオボタンを作成
- ビルトインのフィルターの使用方法
- ビルトインのフィルターで関数を使用
- カスタムフィルターの使用方法
- Bootstrap3を使ってページング
- スクリプト内でフィルターを使用、既存のフィルターを拡張
サービス
- サービスの概要とfactory、service、providerの使い分け
- $qサービスでpromise/deferredパターン
- $httpサービスの概要、サーバーからJSONデータ取得
- $httpサービスのPOSTでデータ送信
- $qサービスを使ってhttpリクエストを複数実行
- $httpサービスのinterceptorの使用方法
- AngularJSのwithCredentialsの設定、CORS
- $timeoutサービスと$intervalサービス
- $resourceサービスを使ってREST
- $locationサービスを使ってURLを操作
- $routeサービスと$resourceサービスを使ったサンプルを作成
- routeChangeSuccessを使ってflashメッセージ表示
- JavaScript、CSSを含むHTMLデータをバインドして表示
カスタムディレクティブ