anchorScroll не выполняется в контроллере с помощью ng-repeat?

#html #angularjs #angularjs-ng-repeat #ng-repeat #anchor-scroll

#HTML #angularjs #angularjs-ng-repeat #привязка-прокрутка

Вопрос:

Я думаю, что я определил какое-то странное поведение AngularJS1, касающееся времени выполнения ng-repeat и, следовательно, конфликтующее со временем выполнения контроллера.

Мой контроллер автоматически прокручивается вниз до идентификатора привязки html: $anchorScroll(‘html_id’);

Это отлично работает со статическим html (static html plunker)

 <div id="hello1">Hello1 </div>  

Но anchorScroll, похоже, не работает, если он вызывается контроллером для divs, сгенерированных ng-repeat (плунжер ng-repeat)

  <div id="{{ITEM.slug}}" ng-repeat="ITEM in LIST">{{ITEM.slug}}</div>  

ПРИМЕЧАНИЕ:: anchorScroll на ng-repeat отлично работает с кнопкой, но я хочу, чтобы она автоматически прокручивалась ПРИ ЗАГРУЗКЕ…

(Я также пробовал использовать ng-init= для вызова функции прокрутки, но та же проблема с синхронизацией — поэтому он не может найти привязку … даже если закодирован ПОСЛЕ ng-repeat)

Есть идеи / обходные пути?

(похоже, нет никаких событий ng-repeat для привязки …)

Ответ №1:

Чтобы это сработало, $anchorScroll оно должно выполняться после цикла дайджеста, чтобы элементы действительно были отображены.

Самый простой способ добиться этого — использовать $timeout со 0 второй задержкой, которая создает обещание, которое будет разрешено. С 0 задержкой обещание будет обработано после завершения текущего цикла дайджеста, вместо того, чтобы обрабатываться немедленно.

 testApp.controller('testCtrl', function($scope, $anchorScroll, $timeout) {
  $scope.LIST = [{
    "slug": "hello1"
  }, {
    "slug": 'hello2'
  }, {
    "slug": 'hello3'
  }];

  $timeout(function() {
    $anchorScroll('hello3');
  }, 0);
});
  

https://plnkr.co/edit/53hlGNig7eozlm1vqkQL?p=preview

Комментарии:

1. Ты звезда! Хорошее чистое решение — именно то, что я искал — Спасибо 🙂