कोणीय के आंशिक दृश्य में एंकर पर कैसे कूदें?

मेरे पास एक लंबी सूचीदृश्य में कई आइटम हैं। Mypage.html # the_item_id पर जाकर मेरे उपयोगकर्ता एक विशिष्ट आइटम पर (यानी बुकमार्क) कैसे जा सकते हैं?कोणीय के आंशिक दृश्य में एंकर पर कैसे कूदें?

असल में, जब मैं इनलाइन व्यू [नमूना 1] का उपयोग कर सकता हूं, लेकिन जब मैं आंशिक दृश्य [नमूना 2] का उपयोग नहीं करता हूं। क्या बाद के मामले में कोई बग है, या मुझे किसी भी कामकाज का उपयोग करना चाहिए?

अग्रिम धन्यवाद!

नमूना 1: आप page.html # A100 यात्रा कर सकते हैं देखने के लिए आइटम 100 ::

<!doctype html> 
<html ng-app> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> 
    <script> 
     function MainCtrl($scope){ 
      $scope.items = []; 
      for(var i=0; i<200; i++){$scope.items.push({id: i})} 
     } 
    </script> 
    </head> 
    <body ng-controller='MainCtrl'> 
    <div> 
     <ul> 
     <li ng-repeat="i in items"><a id='a{{i.id}}'>{{i.id}}</a></li> 
     </ul> 
    </div> 
    </body> 
</html>

नमूना 2: page2.html # A100 पर नहीं जा सकते आइटम 100 को देखने के लिए, क्यों? ::

<!doctype html> 
<html ng-app> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> 
    <script> 
     function MainCtrl($scope){ 
      $scope.items = []; 
      for(var i=0; i<200; i++){$scope.items.push({id: i})} 
     } 
    </script> 
    </head> 
    <body ng-controller='MainCtrl'> 
    <div ng-include="'scroll_view.html'"><!-- MUST use "'...'" notation here --></div> 
    </body> 
</html>

और यह scroll_view.html नमूना 2 ::

<div> 
    <ul> 
    <li ng-repeat="i in items"><a id='a{{i.id}}'>{{i.id}}</a></li> 
    </ul> 
</div>

स्रोत

2012-12-09 RayLuo

मुझे एक ही समस्या है। क्या आपको अभी तक कोई समाधान मिला है? जो मैंने खोजा है, उससे समस्या यह है कि jqlite 'element.getElementById' 'स्क्रॉल' फ़ंक्शन के अंदर शून्य हो रहा है। शायद क्योंकि सामग्री अभी तक डोम में मौजूद नहीं है? – NilsH

आप पर स्वत: स्क्रॉल विशेषता का उपयोग करने के लिए है की जरूरत है एनजी-शामिल हैं।

चेक यहाँ डॉक्स: http://docs.angularjs.org/api/ng.directive:ngInclude

स्वत: स्क्रॉल (वैकल्पिक) - {स्ट्रिंग =} - चाहे ngInclude $ anchorScroll फोन व्यूपोर्ट स्क्रॉल करने के लिए सामग्री भरी हुई है के बाद करना चाहिए। यदि विशेषता सेट नहीं है, तो स्क्रॉलिंग अक्षम करें। यदि विशेषता मूल्य के बिना सेट की गई है, तो स्क्रॉलिंग सक्षम करें। अन्यथा स्क्रॉलिंग केवल तभी सक्षम करें जब अभिव्यक्ति सच्चाई का मूल्यांकन करे।

तो आपके मामले में:

<div ng-include="'scroll_view.html'" autoscroll></div>

स्रोत

2012-12-10 21:04:59 matys84pl

चाल के लिए धन्यवाद! मुझे वास्तव में सभी डॉक्टरों के माध्यम से जाना चाहिए। – RayLuo

मुझे खुशी है कि मदद मिली। क्या आप कृपया स्वीकार किए गए उत्तर का चयन कर सकते हैं? ;) – matys84pl

तो सिद्धांत में, समस्या को हल करना था। समस्या को हल करता है जितना हमने सोचा था उससे अधिक जटिल है। जब मैंने क्रोम 23 पर परीक्षण किया, तो केवल इनलाइन-कार्यान्वयन (नमूना 1) अपेक्षा के अनुसार काम करता है। ऑटोस्कोल सेटिंग के साथ या उसके बिना आंशिक दृश्य का उपयोग करते समय, पृष्ठ.html # एंकर नोटेशन हमें गंतव्य तक नहीं ला सकता है। फ़ायरफ़ॉक्स 17 में स्थिति भी बदतर है, उपरोक्त संयोजन कार्यों में से कोई भी नहीं। मैं विंडोज प्लेटफार्म पर एंगुलरजेएस 1.0.3 के साथ परीक्षण कर रहा हूं। पता नहीं है कि यह सिर्फ मुझे है या नहीं। तो बस यह प्रश्न यह देखने के लिए खुला रखें कि दूसरों को प्रतिक्रिया कैसे मिल सकती है। वैसे भी @ matys84pl धन्यवाद। – RayLuo

मैं html5Mode सही पर सेट करने की आवश्यकता है लगता है, लेकिन मैं कुछ नहीं कर रहा हूँ। यदि यह आपके लिए काम करता है (: /// ... यह मेरे लिए किया था, लेकिन मैं केवल फ़ाइल का उपयोग कर पृष्ठ को लोड करना क्रोम 23 पर परीक्षण): देखें

<!doctype html> 
<html ng-app="app"> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> 
    <script src="app.js"></script> 
    <script type="text/ng-template" id="scroll_view.html"> 
     <div> 
     <ul> 
      <li ng-repeat="i in items"><a id='a{{i.id}}'>{{i.id}}</a></li> 
     </ul> 
     </div> 
    </script> 
    <script> 
     function MainCtrl($scope){ 
      $scope.items = []; 
      for(var i=0; i<200; i++){$scope.items.push({id: i})} 
     } 
    </script> 
    </head> 
    <body ng-controller='MainCtrl'> 
    <div ng-include="'scroll_view.html'"><!-- MUST use "'...'" notation here --></div> 
    </body> 
</html>

app.js:

var app = angular.module('app', []). 
    config(function($locationProvider) { 
    $locationProvider.html5Mode(true); 
    })

स्रोत

2012-12-11 17:28:15

कोणीय के आंशिक दृश्य में एंकर पर कैसे कूदें?

उत्तर

संबंधित मुद्दे