AngularJSコードサンプル（ルート、flash v1.2.23）

wp-admin

7年前

AngularJS : 1.2.23
Bootstrap : 3.x

（１）routeChangeSuccessイベントを使ってflashメッセージ表示

ホーム
次ページ

flashメッセージ


  <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;
  }

});