В AngularJS я могу использовать текущий маршрут в ngSwitch за пределами ngView

Question

Я пытаюсь изменить заголовок страницы в зависимости от текущего представления. Заголовок находится за пределами ngView. Это возможно, или мне нужно поместить заголовок внутри представления?

Мой код выглядит примерно так:

<div id="header">
    <div ng-switch on="pagename">
        <div ng-switch-when="home">Welcome!</div>
        <div ng-switch-when="product-list">Our products</div>
        <div ng-switch-when="contact">Contact us</div>
    </div>
    (a lot of unrelated code goes here)    
</div>

<div id="content>
    <div ng-view></div>
</div>

Answer 1

Дайте каждому маршруту имя, когда вы его определяете. Затем введите $route в контроллер, а затем опубликуйте его в текущую область. Затем вы можете привязать ng-переключатель к $route.current.name

Answer 2

Вы могли бы ввести $location обслуживание и проверка $location.path(), http://docs.angularjs.org/api/ng.%24location

JS:

function Ctrl($scope, $location) {
  $scope.pagename = function() { return $location.path(); };
};

HTML:

<div id="header">
  <div ng-switch on="pagename()">
    <div ng-switch-when="/home">Welcome!</div>
    <div ng-switch-when="/product-list">Our products</div>
    <div ng-switch-when="/contact">Contact us</div>
  </div>
</div>

Answer 3

Кажется, это будут разные контроллеры для заголовка и контента. Лучший способ связи между контроллерами - сервис. Другой способ - события. Смотри Войта ответ.

Answer 4

Хороший подход для решения этой проблемы может заключаться в том, чтобы ввести $ route в ваш контроллер, а затем использовать его для получения текущего имени маршрута.

app.controller('YourController', function($scope, $route){
    $scope.pagename = $route.current.$$route.name;
});

И вы должны назвать свои маршруты следующим образом:

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/product-list', {
        templateUrl: 'views/product-list.html',
        controller: 'ProductsController',
        name: 'product-list'
      }).
      when('/home', {
        templateUrl: 'views/home.html',
        controller: 'HomeController',
        name: 'home'
      }).
      otherwise({
        redirectTo: '/'
      });
  }]);

Поэтому, когда вы загружаете маршрут, контроллер читает текущее имя маршрута и передает его представлению в вашей переменной pagename. Затем вид поднимет его и отобразит правильный вид, который вам нужен.

Надеюсь, поможет:)