2015-10-20 4 views
7

काम नहीं कर रहा मैं इस परियोजना में सामान बनाने के लिए निम्नलिखित निर्देश https://github.com/d-oliveros/ngSmoothScroll उपयोग कर रहा हूँ निर्देश सुचारू रूप से चयनित तत्व के लिए स्क्रॉल।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> 
... 

है वहीं स्क्रिप्ट शामिल किया गया है और मेरे 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 serve काम पर jslint।

किसी भी विचार मैं गलत क्या कर रहा हो सकता है? मैं कोणीय के लिए बहुत नया हूं और मैं अभी भी इसके माध्यम से अपना रास्ता खोजने की कोशिश कर रहा हूं।

+0

मैं भी वही चीज़ ढूंढ रहा हूं। क्या आपके पास कोई भाग्य है? – sooon

+0

आपका स्क्रॉल करने के लिए और कंटेनर-आईडी तो यह भावना है कि कोई पुस्तक हो जाएगा बना देता है, एक ही तत्व आईडी की है। – o4ohel

उत्तर

2

मुझे यकीन है कि नहीं कर रहा हूँ, लेकिन क्योंकि आप एक लिंक पर कंटेनर-आईडी और नहीं एक गैर एंकर टैग का उपयोग कर रहे यह हो सकता है। मैं अपने पाद लेख में एक तत्व को स्क्रॉल करने के लिए इसका उपयोग कर रहा हूं। मेरे कोड है:

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

minified संस्करण मेरे लिए काम नहीं कर रहा था तो मेरे स्क्रिप्ट इस प्रकार जाना:

<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', 
     'ngSanitize', 
     'smoothScroll' 
    ]) 
0

यह नहीं था मेरे लिए काम करें, इसके बजाय Angular-Scroll आज़माएं। यह आपके ब्राउज़र में पहले परीक्षण करने के लिए एक लाइव डेमो है।

इसमें एक 'जासूसी' निर्देश भी है ताकि आप देखे गए तत्वों में कक्षाएं जोड़ सकें।