2016-03-27 5 views
2

Как изменить заголовок, отображаемый вне области действия контроллера, в зависимости от текущего контроллера, предоставляемого маршрутизатором? В принципе, у меня есть контроллер mainMenu, который загружается при вызове определенного маршрута. Однако вне представления есть частичное включение, которое является заголовком. Я хочу изменить вывод внутри заголовка в зависимости от текущего маршрута. Я добавил структура ниже код:Угловой 1: Изменить название в зависимости от текущего маршрута

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){ 
    // 
}]); 
+0

Вы можете использовать этот модуль https://github.com/ncuillery/angular-breadcrumb –

+0

Установить заголовок на $ rootScope –

ответ

4

Вы могли бы добавить еще одно свойство с каждой опции маршрута, который будет что-то вроде 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; 
}); 
+0

Я добрая до Angular, вы можете предоставить мне дополнительную информацию или ссылку на '$ routeChangeSuccess' мероприятие? – Kunok

+0

@ Kunok посмотрите на обновленный ответ. –

+0

Очень хорошо сделано, это прекрасно работает, я приму этот ответ, как только Stackoverflow позволяет мне. – Kunok