Угловой UI-маршрутизатор: настройка автопрокрутки в режиме заголовка не прокручивается вверх

Question

TL; DR: с помощью Углового UI-маршрутизатора можно автопрокрутить до того же состояния, что и для отображения его шаблона?

установки параметров

У меня есть Угловое 1.4.1 приложение, используя пользовательский интерфейс маршрутизатора 0.2.15 и Угловая Материал 0.10.0.

Example Plunk

Существует родитель состояние называется website и три дочерние состояния: home, foo и bar.

Родительское состояние имеет вид wrapper, который отображается через тег <ui-view> в index.html. Он также имеет два других вида: header@website и footer@website, которые отображаются через шаблон изображения wrapper.

Каждое из трех дочерних состояний имеет вид main, который отображается через шаблон представления родительского состояния wrapper.

Что Ожидать

В шаблоне родительского государства wrapper зрения, когда я установил autoscroll="true" на ui-view тег для header@website зрения, я ожидаю, что страница будет перемещаться к началу всякий раз, когда состояние изменяется. См. Принятый ответ this SO question.

Что происходит

Когда любой из ui-sref ссылок в футере щелкают, страница не прокручивается вверх.

Что я Пробовал

Если я ставлю autoscroll="true" на ui-view тег для основной точки зрения, это работает, как ожидалось. Однако это не то, что я хочу, потому что заголовок скрыт от просмотра, даже когда вы переходите к состоянию из адресной строки.

Что Подозреваю

Я думаю, что проблема связана с тем, что header@website является мнение, что принадлежит к website государства, и что autoscroll работает только для представлений, которые обычно отображаются на текущем шаблоне , Другими словами, обычно вид header будет отображаться через index.html, а не wrapper.html.

Вопрос

ли мое подозрение выше правильно? Нужен ли мне рефакторинг, или есть способ сделать эту работу такой, как есть?

Заранее благодарен!

Answer 1

Хотя я не сторонник манипуляции DOM вне директивы, быстрое и грязное решение было бы добавить метод scrollTo в .run блоке вашего верхнего определения модуля уровня, напр:

.run(function ($window, $rootScope) { 

    $rootScope.$on('$viewContentLoaded', function() { 

     var interval = setInterval(function() { 
      if (document.readyState == "complete") { 
       window.scrollTo(0, 0); 
       clearInterval(interval); 
      } 
     }, 1); 

    }); 
}) 

http://plnkr.co/edit/qPqy69o7F9aTjNbUTMGY?p=preview

(заимствован отсюда https://stackoverflow.com/a/22166553/1516309)

Я попытался с помощью $anchorScroll() метод УИ-маршрутизатора, но так как ваши ссылки в нижней части страницы, вот где р возраст прокрутки до, поэтому вы на самом деле не замечаете, что он что-то делает.