[解決済み] UI-Routerでページタイトルを設定する

質問

AngularJSベースのアプリを、ビルトインのルーティングの代わりにui-routerを使用するように移行しています。以下のように設定しています。

.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
    .state('home', {
        url: '/home',
        templateUrl : 'views/home.html',
        data : { pageTitle: 'Home' }

    })
    .state('about', {
        url: '/about',
        templateUrl : 'views/about.html',
        data : { pageTitle: 'About' }
    })
     });

ページのタイトルを動的に設定するためにpageTitle変数を使用するにはどうすればよいですか？組み込みのルーティングを使用すると、次のようになります。

$rootScope.$on("$routeChangeSuccess", function(currentRoute, previousRoute){
    $rootScope.pageTitle = $route.current.data.pageTitle;
  });

という変数があり、その変数をHTMLで以下のようにバインドします。

<title ng-bind="$root.pageTitle"></title>

ui-routerを使用してフックすることができる同様のイベントはありますか？onEnter' と 'onExit' 関数があることに気づきましたが、それらはそれぞれの状態に結び付けられているようで、それぞれの状態のために $rootScope 変数を設定するコードを繰り返す必要がありそうです。

どのように解決するのですか？

使用方法 $stateChangeSuccess .

ディレクティブに入れればいいんです。

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

        var listener = function(event, toState) {

          var title = 'Default Title';
          if (toState.data && toState.data.pageTitle) title = toState.data.pageTitle;

          $timeout(function() {
            element.text(title);
          }, 0, false);
        };

        $rootScope.$on('$stateChangeSuccess', listener);
      }
    };
  }
]);

そして

<title update-title></title>

デモです。 http://run.plnkr.co/8tqvzlCw62Tl7t4j/#/home

コードです。 http://plnkr.co/edit/XO6RyBPURQFPodoFdYgX?p=preview

とはいえ $stateChangeSuccess は $timeout は、少なくとも私自身がテストしたときは、履歴が正しくなるために必要でした。

編集：2014年11月24日 - 宣言的アプローチ。

app.directive('title', ['$rootScope', '$timeout',
  function($rootScope, $timeout) {
    return {
      link: function() {

        var listener = function(event, toState) {

          $timeout(function() {
            $rootScope.title = (toState.data && toState.data.pageTitle) 
            ? toState.data.pageTitle 
            : 'Default title';
          });
        };

        $rootScope.$on('$stateChangeSuccess', listener);
      }
    };
  }
]);

そして

<title>{{title}}</title>

デモです。 http://run.plnkr.co/d4s3qBikieq8egX7/#/credits

コードです。 http://plnkr.co/edit/NpzQsxYGofswWQUBGthR?p=preview