Как динамически изменить заголовок на основе частичного представления AngularJS?
Я использую ng-view для включения частичных представлений AngularJS и хочу обновить теги заголовка страницы и заголовка h1 на основе включенного представления. Это выходит за рамки контроллеров частичного представления, и поэтому я не могу понять, как связать их с набором данных в контроллерах.
Если бы это был ASP.NET MVC, вы могли бы использовать @ViewBag для этого, но я не знаю эквивалента в AngularJS. Я искал общие службы, события и т. Д., Но все еще не могу заставить их работать. Любой способ изменить мой пример, чтобы он работал, будет высоко ценится.
Мой HTML:
<html data-ng-app="myModule">
<head>
<!-- include js files -->
<title><!-- should changed when ng-view changes --></title>
</head>
<body>
<h1><!-- should changed when ng-view changes --></h1>
<div data-ng-view></div>
</body>
</html>
Мой JavaScript:
var myModule = angular.module('myModule', []);
myModule.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/test1', {templateUrl: 'test1.html', controller: Test1Ctrl}).
when('/test2', {templateUrl: 'test2.html', controller: Test2Ctrl}).
otherwise({redirectTo: '/test1'});
}]);
function Test1Ctrl($scope, $http) { $scope.header = "Test 1";
/* ^ how can I put this in title and h1 */ }
function Test2Ctrl($scope, $http) { $scope.header = "Test 2"; }