2015-10-20 30 views
7

Bu projede yer alan öğeleri yapmak için aşağıdaki öğeyi https://github.com/d-oliveros/ngSmoothScroll kullanıyorum.ngSmoothScroll açısal yönergesi çalışmıyor

İşte benim kod:

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

'smoothScroll' projeye fiili bağımlılık dahil olmak: Senaryo dahil ve benim app.js dosya içindeki Ben edilir oluyor

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

. bu yazının başında verilen linke içindeki talimatları takip Benim görünümü içinde ne olduğunu: Ancak

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

, oluyor hiçbir pürüzsüz kaydırma yoktur ve ayrıca bu iki verdiği uyarı/hata olduğunda grunt serve görevimde konsol veya jslint.

Neyi yanlış yaptığımı biliyormusunuz? Ben açlık için çok yeni ve hala yolumu bulmaya çalışıyorum.

+0

Ben de aynı şeyi arıyorum. Hiç şansın var mı? – sooon

+0

Kaydırma kodu ve kapsayıcı kimliğiniz aynı öğe kimliğine sahiptir, dolayısıyla kaydırma işleminin gerçekleşmeyeceği anlaşılır. – o4ohel

cevap

2

Emin değilim, ancak kapsayıcı kimliğini bir bağlantıda değil, bağlantı etiketinde kullanıyor olmanız olabilir. Altbilgideki bir öğeye gitmek için bunu kullanıyorum. Benim kodudur: aşağıdaki gibi küçültülmüş versiyonu benim için çalışma değildi

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

yani benim komut gidin:

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

Ve modülü için:

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

Olmadı Benim için de çalış, bunun yerine Angular-Scroll'u deneyin. Önce tarayıcınızda test etmek için canlı bir demo var.

Ayrıca bir "spy" yönergesi vardır, böylece görünümde olan öğelere sınıf ekleyebilirsiniz.

İlgili konular