角度1：根據當前路線更改標題

Question

如何根據路由器提供的當前控制器更改顯示在控制器範圍之外的標題？基本上，我有調用特定路由時加載的mainMenu控制器。但是，在視圖之外，部分包含哪個是標題。我想根據當前路線更改標頭內的輸出。我添加以下代碼結構：

的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' 
}). 

然後把$routeChangeSuccess（它被當路由變化成功發射）事件中HeaderCtrl，然後抓取當前路由對象並從中獲取標題並將其設置爲currentTitle範圍變量

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