[AngularJS-3rd] UI-Router 控制頁面標題 Page Title

使用UI-Router在切換頁面時，可參考以下範例。

http://plnkr.co/edit/3QEvypXiMglfgwkZsGhV?p=preview

實作方法

使用$stateProvider的data設定客制化的參數pageTitle，並實作updateTitle directive。
在updateTitle使用 $rootScope.$on監聽 $stateChangeStart 事件。

console.clear();

var app = angular.module('myApp', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise('/home');

  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'home.html',
      data: {
        pageTitle: 'Home'
      }
    })
    .state('about', {
      url: '/about',
      templateUrl: 'about.html',
      data: {
        pageTitle: 'About'
      }
    })
});

app.controller('MyCtrl', ['$scope', '$state',
  function MyCtrl($scope, $state) {

    $scope.home = function() {
      $state.go('home');
    };

    $scope.about = function() {
      $state.go('about');
    };

  }
]);

app.directive('updateTitle', function($rootScope) {
  return {
    link: function(scope, element) {

      var listener = function(event, toState, toParams, fromState, fromParams) {
        var title = 'Default Title';
        if (toState.data && toState.data.pageTitle) title = toState.data.pageTitle;
        element.text(title)
      };

      $rootScope.$on('$stateChangeStart', listener);
    }
  }
});