Прокрутка работает только после обновления страницы

Question

На моей первой странице у меня есть несколько кнопок (promo1, promo2, promo3, ...), которые соответственно приводят к элементу с идентификатором «promo1» или «promo2» или «promo3», ... на второй странице.

Поэтому, когда я приземляюсь на вторую страницу, я хочу прокрутить непосредственно элемент, который я выбрал с помощью кнопки. Поэтому я передать идентификатор так:

mysite.com/secondpage/:promo1(/2/3, depends on the button.) 

и я получить идентификатор с помощью $routeParams из angularJs. Но у меня есть действительно огромная проблема: остановка прокрутки на середине страницы (возможно, потому что она останавливается, когда элемент отображается на экране, дайте мне знать), но если я обновляю страницу, свиток выполняет то, о чем я прошу, и остановитесь сверху на элементе!

Вот код, я использую в данный момент:

$scope.goToAnchor = function(){ 
     // This is just one of the test I've made, does not work better. 

     // if ($routeParams.anchor == ':promoFamily' || $routeParams.anchor == ':promoGroup' || $routeParams.anchor == ':promoCard'){ 
     //  $scope.anchor = $routeParams.anchor.replace(':','#'); 
     //  $('html, body').animate({ 
     //   scrollTop: $($scope.anchor).offset().top 
     //  }, 200); 
     // } 

     // Code I use: 

     if ($routeParams.anchor == ':promoFamily' || $routeParams.anchor == ':promoGroup' || $routeParams.anchor == ':promoCard'){ 
      $location.hash("#"); 
      $location.hash($routeParams.anchor.replace(':','')); 
      $anchorScroll(); 
     } 
    }; 
    $scope.goToAnchor(); 

событие, если у вас есть только какие-то намеки, быть свободным, чтобы оставить комментарий, это поможет мне до тех пор, как I'am работающим над этим 2 дня сейчас ...

Answer 1

Это потому, что ваши элементы не загружены полностью, когда вы вызываете функцию goToAnchor. Используйте $timeout, чтобы позвонить $scope.goToAnchor() через 1 секунду (измените его в соответствии с временем загрузки страницы).

Сначала введите в контроллер $timeout. Затем

$timeout(function() { 
    $scope.goToAnchor(); 
}, 1000); 

Answer 2

Inject $ таймаут в контроллере, и использовать его, как показано ниже.

$timeout(function() { 
    $scope.goToAnchor(); 
}); 

Это поможет вызвать функцию после рендеринга полного вида.