2015-04-20 11 views
6

में शीर्ष पर हमेशा स्क्रॉल करें मैं AngularJS (MEAN.io स्टैक) का उपयोग कर रहा हूं और मुझे स्क्रॉल से संबंधित एक परेशान गड़बड़ मिल रही है।AngularJS

जब उपयोगकर्ता किसी लिंक पर क्लिक करता है, तो गंतव्य पृष्ठ शीर्ष पर रहने के बजाय मूल पृष्ठ की तुलना में एक ही स्क्रॉल स्थिति लेता है।

इस अजीब व्यवहार फिक्सिंग के लिए, मैं अगले प्रयोग किया है:

$rootScope.$on("$viewContentLoaded", function() { 
    $anchorScroll(); 
}); 

लेकिन इस कोड हर पृष्ठ शीर्ष स्थान है, जो कष्टप्रद है और साथ ही क्योंकि उपयोगकर्ता वापस जाएँ और ठीक करने के लिए सक्षम होना चाहिए पर स्क्रॉल लेता है बनाता है पिछली स्क्रॉल स्थिति।

कोई सुझाव? मैं वांछित परिणाम कैसे प्राप्त कर सकता हूं?

धन्यवाद!

संपादित --------------------

जब मैं एनजी-व्यू + स्वत: स्क्रॉल समाधान का उपयोग करने की कोशिश की है, इसके लिए काम नहीं करता है मैं और मुझे नहीं पता क्यों। मेरी एचटीएमएल कोड में

<body ng-cloak class="ng-cloak" ng-class="{state: true, auth: authPage}" ng-controller="BodyController"> 

     <div ng-include="'/system/views/header.html'"></div> 

    <section class="content"> 
     <div data-ng-include="'/ceh-admin/views/adminShortcuts.html'"></div> 
     <div ng-view autoscroll="true">{% block content %}{% endblock %}</div> 
    </section> 

    <div data-ng-include="'/system/views/footer.html'"></div> 

    {% include '../includes/foot.html' %} 

    </body> 

कुछ अजीब:

यह मेरा default.html पृष्ठ सर्वर के द्वारा संचालित है, जिस तरह से मैं इसे का उपयोग कर रहा है?

उत्तर

0

ngView documentation के अनुसार आपको यह घोषणा करने की आवश्यकता है कि आप स्क्रॉलिंग को कैसे प्रबंधित करना चाहते हैं।

स्वत: स्क्रॉल (वैकल्पिक) स्ट्रिंग चाहे ngView के बाद दृश्य अद्यतन किया जाता है व्यूपोर्ट स्क्रॉल करने के लिए $ anchorScroll फोन करना चाहिए।

  • यदि विशेषता सेट नहीं है, तो स्क्रॉलिंग अक्षम करें।
  • यदि विशेषता बिना मूल्य के सेट की गई है, तो स्क्रॉलिंग सक्षम करें।
  • अन्यथा केवल स्क्रॉलिंग सक्षम करें यदि autoscroll अभिव्यक्ति मान एक अभिव्यक्ति के रूप में मूल्यांकन किया गया है तो एक वास्तविक मूल्य उत्पन्न होता है।

यह डिफ़ॉल्ट रूप से अक्षम है तो आप अपने मार्कअप के लिए निम्न जोड़ने की आवश्यकता होगी:

<div ng-view autoscroll></div> 

या (के रूप में डॉक्स प्रति और आपकी पसंद पर निर्भर करता है):

<div ng-view autoscroll="true"></div> 
+0

ऐसा लगता है कि मेरे लिए या तो काम नहीं करता। मैंने मुख्य विषय संपादित किया है कि मैं इसका उपयोग कैसे कर रहा हूं। क्या आप कुछ अजीब देखते हैं? –

+0

क्या आपको कोई कंसोल त्रुटियां मिलती हैं? यदि आप यहां ऑटोस्कोल जोड़ते/हटाते हैं (http: // jsfiddle।नेट/डीएल 76co2r /) आप देख सकते हैं कि इसे कैसे काम करना चाहिए? आपका मार्कअप समस्याग्रस्त नहीं दिखता है। – RichieAHB

0

मैं कोणीय जेएस के साथ सबसे अच्छा नहीं हूं, लेकिन मुझे एक ही समस्या मिली है और मैंने इसे निम्नलिखित कोड का उपयोग करके तय किया है:

<div data-ng-view data-autoscroll="true"></div> 

आप एक यहाँ प्रलेखन देखो ले जा सकते हैं: angular doc

मुझे आशा है कि यह मदद करता है

+0

हाँ, मदद के लिए धन्यवाद, लेकिन उस समय के लिए समाधान मेरे लिए काम नहीं करता है। संपादित मुख्य विषय यह दिखाता है कि मैं ऑटोस्कोल का उपयोग कैसे कर रहा हूं। –

+0

@ रूबेन जिमेनेज़ क्या आप अंगूठी का उपयोग कर रहे हैं? कोई कंसोल त्रुटि? – gon250