フォームでデータ送信後に別のページに遷移する際、遷移直後のみ完了メッセージを表示(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; }関連記事の目次