AngularJSでrouteChangeSuccessを使ってflashメッセージ表示

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です