Угловая пользовательский интерфейс маршрутизатора автопрокрутка конкретных состояний

Question

у меня есть контроллер, который делает окно прокрутки вверх, когда начинается изменение состояния:

$rootScope.$on('$stateChangeStart',function(){ 
    window.scrollTo(0, 0); 
}); 

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

Это маршруты:

'use strict' 

angular.module('myApp') 
.config(function($stateProvider) { 
    $stateProvider 
    .state('everywhere', { 
    url: '/everywhere', 
    templateUrl: 'client/everywhere/everywhere.view.ng.html', 
    controller: 'everywhereCtrl' 
    }) 
    .state('everywhere.instructions', { 
    url: '/instructions', 
    templateUrl: 'client/everywhere/instructions/instructions.view.ng.html', 
    controller: 'everywhereCtrl' 
    }) 
    .state('everywhere.instructions', { 
    url: '/others', 
    templateUrl: 'client/everywhere/others/others.view.ng.html', 
    controller: 'everywhereCtrl' 
    }); 
}); 

и вид:

<div class="container-fluid" id="view" name="view"> 
    <div class="col-md-12 text-center margin-bottom margin-top"> 
    <ul class="nav nav-pills center-pills"> 
     <li class="everywhere" ui-sref-active="active"><a ui-sref="everywhere.instructions">Instructions</a></li> 
     <li class="everywhere" ui-sref-active="active"><a ui-sref="everywhere.others">Others</a></li> 
    </ul> 
    </div> 
</div> 

<div ui-view root-state="everywhere"></div> 

Как я смог отключить Автопрокрутку к началу конкретных государств?

Спасибо!

Answer 1

ui-router позволяет вам attach custom data в каждом штате. Таким образом, вы можете добавить некоторый логический флаг noscroll в состояния, в которых вы не хотите прокручивать.

.state('everywhere.instructions', { 
    url: '/instructions', 
    templateUrl: 'client/everywhere/instructions/instructions.view.ng.html', 
    controller: 'everywhereCtrl', 
    // don't scroll for this state 
    data: { 
    noscroll: true, 
    } 
}) 

И тогда в вашем слушателе $stateChangeStart событий вы можете проверить, если toState помечен как noscroll

$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){ 
    if (toState.data && toState.data.noscroll) { 
    return; 
    } 

    window.scrollTo(0, 0); 
}); 

Обратите внимание, как я добавил параметры функции обратного вызова для слушателя событий. See the docs.

Если вы хотите, вы можете перевернуть эту логику и только прокрутить вверх, когда определено состояние scrollToTop. Независимо от того, что имеет смысл для вашего случая использования.