Angular 1: 根据当前路线更改标题

Question

如何根据路由器提供的当前控制器更改显示在控制器范围之外的标题？基本上，我有调用特定路由时加载的 mainMenu 控制器。但是，在视图之外，有部分包含 header。我想根据当前路线更改 header 内的输出。我在下面添加了代码结构：

index.html

<div ng-include="'partials/header.html'"></div>
<div ng-view></div>

/partials/header.html

<header ng-controller="HeaderCtrl">
      <h1>{{ currentTitle }}</h1>
</header>

/partials/main-menu.html

<div ng-controller="MainMenuCtrl">

</div>

路由器

var TaskApp = angular.module('TaskApp', [
  'ngRoute',
  'taskAppControllers'
]);

TaskApp.config(['$routeProvider',
  function($routeProvider){
  $routeProvider.
      when('/main-menu', {
        templateUrl: "partials/main-menu.html",
        controller: "MainMenuCtrl"
      }).
      otherwise({
        redirectTo: "/"
      });
  }]);

控制器：

var taskAppControllers = angular.module('taskAppControllers',[]);

taskAppControllers.controller('TaskAppCtrl',[function(){}]);
taskAppControllers.controller('DesktopCtrl',[function(){}]);

taskAppControllers.controller('MainMenuCtrl', ['$scope','$http',
 function($scope, $http){
  $http.get('data/main-menu.json?' + Math.random()).success(function(data){
    $scope.mainMenuOptions = data;
  });
  $scope.currentTitle = "Main menu"
}]);

taskAppControllers.controller('HeaderCtrl', ['$scope',
 function($scope){
   //
}]);

Answer 1

您可以在每个路线选项中再添加一个属性，类似于 title

when('/main-menu', {
    templateUrl: "partials/main-menu.html",
    controller: "MainMenuCtrl",
    title: 'Main Page'
}).

然后在 HeaderCtrl 中放置 $routeChangeSuccess（当路线更改成功时触发）事件，然后抓取当前路线 object 并从中获取标题并将其设置为currentTitle 作用域变量

$scope.$on('$routeChangeSuccess', function(event, current) {
    $scope.currentTitle = current.title;
});

Angular 1: 根据当前路线更改标题

Angular 1: Change title depending on current route

javascript

angularjs

routing

angularjs-routing