AngularJS : 1.2.23
Bootstrap : 3.x
（１）routeChangeSuccessイベントを使ってflashメッセージ表示
flashメッセージ
{{getMessage()}}
<div ng-controller="MyCtrl">
<ul class="nav nav-pills">
<li><a href="#/">ホーム</a></li>
<li><a href="#/page">次ページ</a></li>
</ul>
<div class="bg-success" ng-show="getMessage()">
<b>flashメッセージ</b>
<p>{{getMessage()}}</p>
</div>
<ng-view></ng-view>
<script type="text/ng-template" id="home.html">
<h3>Home flashメッセージ送信テスト</h3>
<form ng-submit="submit(message)" class="form-inline">
<input type="text" ng-model="message" autofocus>
<button class="btn">コメント送信</button>
</form>
</script>
<script type="text/ng-template" id="page.html">
<h3>次ページ</h3>
</script>
</div>
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.config(function($routeProvider) {
$routeProvider
.when("/home", { templateUrl: "home.html" })
.when("/page", { templateUrl: "page.html" })
.otherwise({ redirectTo: "/home" });
});
demoApp.controller("flashCtrl", function($scope, $location, $rootScope) {
var queue = [];
var currentMessage = "";
$scope.message = "テストコメント";
$rootScope.$on("$routeChangeSuccess", function() {
currentMessage = queue.shift() || "";
});
$scope.submit = function(message) {
queue.push(message);
$location.path("/page");
}
$scope.getMessage = function() {
return currentMessage;
}
});