Как транслировать изменения пути во все представления в приложении AngularJS?

У меня есть одностраничное приложение AngularJS -, отображающее 3 представления (, которые на самом деле являются 3 директивами ).. Чтобы проиллюстрировать мой вопрос, давайте предположим, что мой пользовательский интерфейс идентичен пользовательскому интерфейсу GMail и что мои 3 представления:

  • Панель навигации(слева)--где GMail отображает такие папки, как «Входящие», «Черновики»...
  • Панель инструментов(вверху справа)--где GMail отображает кнопки
  • Панель содержимого(внизу справа)--где GMail отображает сообщения

Эти 3 представления должны обновляться всякий раз, когда изменяется путь. Например:

  • Панель навигации должна выделять определенный элемент.
  • Панель инструментов должна отображать/скрывать определенные кнопки.
  • Панель содержимого должна загружать и отображать определенные данные с сервера.

Как лучше всего это сделать в AngularJS?

До сих пор у меня:

  1. Исключено использование $routeProvider.when()потому что мне нужно обновить три вида, а $routeProviderподдерживает только один ngView.
  2. Создал СЛУЖБУ , которая отслеживает текущий путь и использует $rootScope.$broadcast()чтобы предупредить контроллеры об изменении пути.
  3. (ИЛИ, ВМЕСТО #2 )Создан КОНТРОЛЛЕР , который делает то же самое, что и #2.
  4. Перехвачено событие, транслируемое #2 или #3 с $scope.$ на()(Я делаю это в контроллере представления ).

Это работает, но у меня есть несколько проблем:

  • Событие «изменение пути» часто передается ДО того, как мои прослушиватели событий будут установлены, особенно при начальной загрузке страницы.Вероятно, это связано с тем, что мои шаблоны представлений загружаются с сервера, и прослушиватели не могут быть настроены до завершения загрузки шаблонов.
  • Нет ли более эффективного/автоматизированного способа отслеживания изменений пути в AngularJS? (См. мой код ниже, он кажется довольно "ручным".)
  • Принадлежит ли код, отслеживающий изменения пути, СЛУЖБЕ или КОНТРОЛЛЕРУ? (Я бы склонялся к сервису, так как контроллер больше подходит для добавления поведения в представление.)
  • Как гарантировать, что мои представления поймают событие «изменение пути»? Должен ли я вообще использовать событие? (может быть, я мог бы сохранить путь в сервисе, а мои представления вместо этого смотрели бы сервис?)

Мой код для отслеживания изменений пути (Я поместил его в службу или в контроллер):

var watchExpression = function() { return $location.path(); };
var listener = function(newPath, oldPath) {
    // Broadcast event on $rootScope
    $rootScope.$broadcast('PathChanged', newPath);
};
$rootScope.$watch(watchExpression, listener);

Затем в контроллере представления я ловлю событие:

$scope.$on('PathChanged', function(event, path) {
    // Update view based on new path.
});

Любая помощь приветствуется. Спасибо.

6
задан AngularChef 10 August 2012 в 18:44
поделиться