Scrollspy для материализации не прокручивается вообще с Angularjs

0

Я пытаюсь использовать scrollspy из Materialize (http://materializecss.com/scrollspy.html) для таргетинга на каждый div, созданный с помощью ng-repeat.

Однако мне кажется, что класс scrollspy ничего не делает. Вместо прокрутки к этой части страницы DOM просто перезагружается и указывает на часть страницы.

Другая проблема заключается в том, что использование href="/#community#sharingLove" изменяет URL-адрес веб-сайта. В любом случае, чтобы scrollspy работала без добавления URL-адреса?

<div class="full-height row" ng-controller="CommunityController">
    <div class="col l10 main-content">
        <div ng-repeat="principle in acmPrinciples" id ="{{principle.id}}" class="row full-width centering-text section scrollspy">
            <div class ="col-md-12">
                <h4>{{principle.title}}<h4>
            </div>
            <div class ="col-md-12 comm-description-container">
                <p class="paragraph-style larger-font-size">
                    {{principle.description}}
                 </p>
            </div>
            <div class ="col-md-12">
                <video class="responsive-video comm-video-height" controls>
                    <source ng-src="{{principle.videoURL}}" type="video/mp4">
                </video>
            </div>
        </div>
    </div>

    <div class="col l2 scroll-content">
        <div class="row">
            <div class="col hide-on-small-only m3 l2 scroll-items">
                <ul class="section table-of-contents">
                     <li><a href="#/community#experiencingGod">Experiencing God</a></li>
                     <li><a href="#/community#sharingLove">Sharing Love</a></li>
                     <li><a href="#/community#conntectingLives">Connecting Lives</a></li>
                     <li><a href="#/community#declaringTruth">Declaring Truth</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

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

$(document).ready(function(){
    $('.scrollspy').scrollSpy();
});  
  • 0
    добавить пример на jsfiddle.net
Теги:
materialize
scrollspy

1 ответ

2

Я думаю, что если вы удалите #/сообщество из hrefs, он должен работать. Href должен содержать идентификатор блока, а не дополнительную информацию о URL-адресе. Например, попробуйте использовать

<a href="#experiencingGod">Experiencing God</a>
  • 0
    Привет, Джейкоб, спасибо за ответ. Ты прав. Однако проблема в контроллере AngularJS. Материализация сказала, что выполнение начинается с использованием document.ready. Однако, когда я делаю это в моем контроллере, он не работает. Я также попытался использовать функцию $ document.ready.function () {}, указанную в docs.angularjs.org/api/ng/service/$document, но безуспешно . Если откройте консоль разработчика html-страницы и введите $ ('. Scrollspy'). ScrollSpy (); оно работает. Я думаю, что angular выполняет функцию на ранней стадии, причина в том, что если я помещу следующий код в setTimeout даже на 100 мс, это сработает.
  • 1
    Понимаю. Если контроллер генерирует страницу или он вставляется с помощью ng-include, тогда да, document.ready - не то место. Вы должны выяснить, где правильное место для вызова $ ('. Scrollspy'). ScrollSpy (); является. Его можно поместить в контроллер, хотя угловые пуристы избегают наличия кода, который касается DOM, в контроллере. Хороший подход заключается в создании директивы, которая вызывает scrollSpy () при инициализации представления.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню