【问题标题】:Scrollspy for Materialize not scrolling at all with AngularjsMaterialize 的 Scrollspy 根本不使用 Angularjs 滚动
【发布时间】:2016-01-25 18:26:59
【问题描述】:

我正在尝试使用 Materialize (http://materializecss.com/scrollspy.html) 中的 scrollspy 来定位使用 ng-repeat 创建的每个 div。

但是,在我看来,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 和 materialize。最后一件事:物化的其他功能对我有用,只是不是滚动间谍。我也喜欢

$(document).ready(function(){
    $('.scrollspy').scrollSpy();
});  

【问题讨论】:

标签: javascript jquery angularjs materialize scrollspy


【解决方案1】:

我认为如果您从 href 中删除 #/community ,它应该可以工作。 href 应该包含块的 id,而不是额外的 url 信息。例如尝试使用

<a href="#experiencingGod">Experiencing God</a>

【讨论】:

  • 嗨,Jacob,感谢您的回答。你说的对。然而,问题在于 AngularJS 控制器。 Materialize 表示执行从使用 document.ready 开始。但是,当我在控制器中这样做时,它不起作用。我也尝试使用docs.angularjs.org/api/ng/service/$document 中所述的 $document.ready.function(){} 但没有运气。如果打开 html 页面的开发者控制台并输入 $('.scrollspy').scrollSpy();有用。我认为 Angular 会提前执行该函数,原因是如果我将以下代码放入 setTimeout 中,即使 100 毫秒也可以。
  • 我明白了。如果控制器正在生成页面或使用 ng-include 插入页面,那么是的,document.ready 不是正确的位置。你必须弄清楚在哪里调用 $('.scrollspy').scrollSpy();是。它可以放置在控制器中,尽管角度纯粹主义者避免将涉及 DOM 的代码放在控制器中。一个好的方法是创建一个在视图初始化时调用 scrollSpy() 的指令。
猜你喜欢
  • 2015-12-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-02-01
  • 2014-02-13
  • 2013-01-26
  • 1970-01-01
相关资源
最近更新 更多