У меня есть одностраничное приложение AngularJS -, отображающее 3 представления (, которые на самом деле являются 3 директивами ).. Чтобы проиллюстрировать мой вопрос, давайте предположим, что мой пользовательский интерфейс идентичен пользовательскому интерфейсу GMail и что мои 3 представления:
- Панель навигации(слева)--где GMail отображает такие папки, как «Входящие», «Черновики»...
- Панель инструментов(вверху справа)--где GMail отображает кнопки
- Панель содержимого(внизу справа)--где GMail отображает сообщения
Эти 3 представления должны обновляться всякий раз, когда изменяется путь. Например:
- Панель навигации должна выделять определенный элемент.
- Панель инструментов должна отображать/скрывать определенные кнопки.
- Панель содержимого должна загружать и отображать определенные данные с сервера.
Как лучше всего это сделать в AngularJS?
До сих пор у меня:
- Исключено использование $routeProvider.when()потому что мне нужно обновить три вида, а
$routeProvider
поддерживает только один ngView
.
- Создал СЛУЖБУ , которая отслеживает текущий путь и использует $rootScope.$broadcast()чтобы предупредить контроллеры об изменении пути.
- (ИЛИ, ВМЕСТО #2 )Создан КОНТРОЛЛЕР , который делает то же самое, что и #2.
- Перехвачено событие, транслируемое #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.
});
Любая помощь приветствуется. Спасибо.
задан AngularChef 10 August 2012 в 18:44
поделиться