使用ngRoute在AngularJS中动态更改页面标题

时间:2016-10-01 12:52:24

标签: javascript angularjs title

虽然我已经设法根据不同的路线更改了页面标题,但是当变量出现在图片中时我陷入了困境。

<title ng-bind="title"></title>

Angular Portion

var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'igTruncate']);

 app.config([ '$routeProvider', '$locationProvider', '$sceDelegateProvider', function($routeProvider, $locationProvider, $sceDelegateProvider){

 $routeProvider
  .when('/', {
    controller: 'BaseController',
    templateUrl: 'views/base.html',
    title: 'Welcome to the Website'
  })
  .when('/about', {
    controller: 'AboutController',
    templateUrl: 'views/about.html',
    title: 'About Me'
  });

}]);

// change Page Title based on the routers
app.run(['$location', '$rootScope', function($location, $rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
        $rootScope.title = current.$$route.title;
    });

}]);   

这完全没问题。但是,因为我创建了一个博客,每个博客页面应该有不同的标题。

我的单一博客路线如下所示

 .when('/blog/post/:url', {
        controller: 'PostController',
        templateUrl: 'views/post.html',
        title:  'Blog'
      })

我希望从路线中获取url param并将其连接到我的标题中。 例如,如果路线类似于/blog/post/How-to-change-title-in-angularjs,那么我想获取网址部分并将其添加到我的标题中,这样看起来就像如何更改标题 - 角网格|博客

有可能吗?

1 个答案:

答案 0 :(得分:-2)

您可以从角度文档中查看以下内容: https://docs.angularjs.org/api/ngRoute/service/ $ routeParams

您可以从后端传递标题。 如果没有后端,将它存储在控制器的范围

可能更简单