AngularJS. Способ внедрения кастомного кода в общий шаблон

Допустим, мы хотим динамически менять заголовок страницы и подсвечивать нужную часть меню в зависимости от текущего контроллера.
Топорный способ сделать это — в каждом контроллере пихать в $rootScope переменные типа title и sitePart (для подсветки пункта главного меню). Минус — всегда есть риск забыть установить эти параметры в контроллере.
Но есть другой способ, который сводится к следующему.
Нужно указать параметры в раутере, а потом при изменении адреса в зависимости от этого параметра устанавливать значения в $rootScope.

var staticApp = angular.module('staticApp', ['pageService'])
	.config(['$routeProvider', function ($routeProvider) {
		$routeProvider
			.when('/', {
				templateUrl: 'main',
				controller: 'MainCtrl',
				<strong>sitePart: 'main'</strong>
			})

			.when('/exercise', {
				templateUrl: 'exercises',
				controller: 'ExercisesCtrl',
				sitePart: 'exercises'
			})

			.otherwise({
				redirectTo: '/'
			});
	}]);
/**
 * установить заголовок и подсветить главное меню в зависимости от параметров маршрутизатора
 */
staticApp.run(['$location', '$rootScope', 'Page', function($location, $rootScope, Page) {
  $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
    Page.sitePart.set(current.$route.sitePart);
    $rootScope.sitePart = Page.sitePart.get();
    
    if (current.$route.title) 
    {
      Page.title.set(current.$route.title);
      $rootScope.title = Page.title.get();
    }
  });
}]);

var staticApp = angular.module('staticApp', ['pageService'])

.config(['$routeProvider', function ($routeProvider) {

$routeProvider

.when('/', {

templateUrl: 'main',

controller: 'MainCtrl',

<strong>sitePart: 'main'</strong>

})

.when('/exercise', {

templateUrl: 'exercises',

controller: 'ExercisesCtrl',

sitePart: 'exercises'

})

.otherwise({

redirectTo: '/'

});

}]);

/**

* установить заголовок и подсветить главное меню в зависимости от параметров маршрутизатора

staticApp.run(['$location', '$rootScope', 'Page', function($location, $rootScope, Page) {

$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {

Page.sitePart.set(current.$route.sitePart);

$rootScope.sitePart = Page.sitePart.get();

if (current.$route.title)

{

Page.title.set(current.$route.title);

$rootScope.title = Page.title.get();

}

});

}]);

Вот тут я написал более полный рабочий пример (для того, чтобы пример заработал, нужно открыть в новом окне):
JS Bin
Вот ещё на эту тему — http://stackoverflow.com/questions/12506329/how-to-dynamically-change-header-based-on-angularjs-partial-view

AngularJS. Способ внедрения кастомного кода в общий шаблон

Similar Posts

LEAVE A COMMENT Отменить ответ