無法更新角1個應用程序的標題上路由改變

Question

以下指令被提供當前路線值

(function() { 
    var titleDirective=angular.module('titleDirective',[]); 
    titleDirective.directive('testTitle',function ($rootScope, $timeout) { 
     return { 
      restrict: 'E', 
      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); 
      } 
     }; 
    }) 
})(); 

和我有限定的路由如下所示

.state('admin.signIn', { 
      url: '/signIn', 
      templateUrl: 'credentials/signIn.html', 
      controller: 'loginCtrl', 
      data : { pageTitle: 'Home' } 
     }) 

當我嘗試使用下面的index.html中所示的指令

<test-title>{{title}}</test-title> 

但不知道如何更新val UE在改變HTML路由的標題標籤

<title>Retailer Application</title> 

不知道如何使用{{title}}的表現之類的標題

請提出一個辦法做到這一點

Answer 1

更新你的指令：

myApp.directive('testTitle', function($rootScope, $timeout) { 
    return { 
    restrict: 'E', 
    template: `<title>{{$root.title}}</title>`, 
    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); 
    } 
    }; 
}); 

這裏，只要您使用模板中的$ rootScope爲標題變量，你已經使用{{$root.title}}。之後，僅僅在index.html的

Working Plunker

頭部分添加test-title指令還請確保您使用的是0.4.2版本UI的路由器。使用ui-router $ stateChangeSuccess事件的最新版本（1.x）已棄用。改爲使用$transitions.onSuccess。

Official Documentation & issue