javascript – ngSmoothScroll angular指令不起作用

我正在使用以下指令 https://github.com/d-oliveros/ngSmoothScroll来使该项目中的内容顺利滚动到所选元素.

这是我的代码：

...
<!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-aria/angular-aria.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-messages/angular-messages.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
    <!-- endbower -->
    <!-- endbuild -->
    <script src="bower_components/ngSmoothScroll/dist/angular-smooth-scroll.min.js"></script>
        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/initcontroller.js"></script>
        <!-- endbuild -->
        <script src="scripts/libs/materialize.min.js"></script>
        <script src="scripts/libs/angular-materialize.js"></script>
</body>
...

这是包含脚本的地方(〜/ angular-smooth-scroll.min.js),在我的app.js文件中,我有：

angular
  .module('sccateringApp',[
    'ngAnimate','ngAria','ngCookies','ngMessages','ngResource','ngRoute','ngSanitize','ngTouch','ui.materialize','smoothScroll'
  ])

‘smoothScroll’是项目的实际依赖包含.按照本文开头给出的链接中的说明,这是我在视图中所做的：

<li><a href="#" scroll-to="service-info" container-id="service-info">Contáctame</a></li>
...

<section class="service-info" id="service-info">
<h1 class="sofia-font">Detalles de Servicio</h1>
...

但是,没有平滑的滚动发生,并且在我的grunt服务任务中没有控制台或jslint给出的警告/错误.

知道我可能做错了什么吗？我对角度非常新,我仍然试图找到它的方式.

解决方法

我不确定,但可能是因为您在链接上使用container-id而不是非锚标记.我正在使用它滚动到我的页脚中的元素.我的代码是：

//the anchor link in my nav
 <a href="#" scroll-to="footer" duration="2500">Click Me</a>
 ...

//the element I want to scroll to
 <div id="footer"></div>
 ...

缩小版本对我不起作用所以我的脚本如下：

<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/angular-aria/angular-aria.js"></script>
<script src="/bower_components/angular-messages/angular-messages.js"></script>
<script src="/bower_components/angular-material/angular-material.js"></script>
<script src="/bower_components/angular-sanitize/angular-sanitize.js"></script>

<script src="/bower_components/ngSmoothScroll/lib/angular-smooth-scroll.js"></script>

<script src="/js/app.module.js"></script>
<script src="/js/app.controller.js"></script>
<script src="/js/app.service.js"></script>

对于模块：

angular
   .module('glasser',[
      'ngMaterial','smoothScroll'
    ])