angularjs – 使用UI-Router设置页面标题

发布时间：2020-12-17 09:10:26 所属栏目：安全来源：网络整理

导读：我正在迁移我的基于AngularJS的应用程序使用ui路由器而不是内置路由。我有它配置如下所示 .config(function($stateProvider,$urlRouterProvider) {$urlRouterProvider.otherwise('/home');$stateProvider .state('home',{ url: '/home',templateUrl : 'views

我正在迁移我的基于AngularJS的应用程序使用ui路由器而不是内置路由。我有它配置如下所示

.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路由器？我注意到有’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);
          },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',$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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!