ngSmoothScroll angular directive not working

Question

I'm using the following directive https://github.com/d-oliveros/ngSmoothScroll to make stuff in this project smoothly scroll to the selected element.

Here's my code:

...
<!-- 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>
...

That's where the script is included (~/angular-smooth-scroll.min.js) and inside my app.js file I have:

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

'smoothScroll' being the actual dependency inclusion to the project. Following the instructions inside the link given at the beginning of this post this is what I do inside my view:

<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>
...

However, there is no smooth scroll happening and also, there are no warnings/errors given by either the console or jslint on my grunt serve task.

Any idea what I might be doing wrong? I'm VERY new to angular and I'm still trying to find my way through it.

Answer 1

I'm not sure but it may be because you are using the container-id on a link and not a non-anchor tag. I'm using this to scroll to an element in my footer. My code is:

//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>
 ...

The minified version wasn't working for me so my scripts go as follows:

<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>

And for the module:

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