$ location.path चेंज हैश को% 23 और .hash ठीक काम नहीं कर रहा है

Question

मैं किसी अन्य पृष्ठ पर रीडायरेक्ट करना चाहता हूं & फोकस DIV पर ध्यान देना चाहिए आईडी के साथ 'कुछ-div-id' कहें। मैं निम्नलिखित

$location.path('/' + $scope.config_path.school + '/' + 
     $routeParams.someUrl + '/#some-div-id') 

यह ठीक काम कर रहा है, लेकिन निम्नलिखित

$location.path('/' + $scope.config_path.school + '/' + 
     $routeParams.someUrl + '/').hash('some-div-id') 

यह एक उचित यूआरएल पैदा कर रही है, लेकिन यह% 23 को पहला परिवर्तन # जैसा

/%23some-div-id #If '#' is not already present in the URL 
/%23some-div-id#some-div-id #If '#' is laready present in the URL 
/#some-div-id 

मैं भी करने की कोशिश की कोशिश की आईडी some-div-id

के साथ DIV पर स्क्रॉल न करें

संपादित

app.run(function($rootScope, $location, $anchorScroll, $routeParams) { 
    $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) { 
    setTimeout(function() { 
     if ($location.hash()) { 
     $anchorScroll($location.hash()); 
     } 
    }); 
    }); 
}) 

app.controller('MainCntrl', function($scope, $location, $anchorScroll, $routeParams) { 
}); 

इसके अलावा मैं करने की कोशिश की $location.path & $location.url

Answer 1

$location.url$location.path के बजाय का उपयोग करें।

प्रलेखन के अनुसार, $location.path केवल पथ बदलता है जबकि $location.url पथ, खोज और हैश बदलता है।

तो कोड होगा की तरह

$scope.goto = function() { 
    $location.url('pageone#one'); 
}; 

कहाँ pageone और राज्य का URL #one है आईडी

इसके अलावा यह काम जब इसे सीधे में आईडी के साथ URL पर जाकर बनाने के लिए, इस्तेमाल होता है $anchorScroll। $stateChangeSuccess ईवेंट पर, मौसम की जांच $location.hash मौजूद है या नहीं। अगर मौजूद है, तो $anchorScroll पर कॉल करें। कोड की तरह

.run(function($rootScope, $location, $anchorScroll,$timeout) { 
    $rootScope.$on('$stateChangeSuccess', 
     function(event, toState, toParams, fromState, fromParams) { 
      $timeout(function() { 
       if ($location.hash()) { 
       $anchorScroll(); 
       } 
      }); 
    }); 
}) 

उदाहरण लगेगा - http://plnkr.co/edit/4kJjiMJImNzwLjRriiVR?p=preview

Answer 2

यह व्यवहार की उम्मीद है (URL जांच http://run.plnkr.co/plunks/4kJjiMJImNzwLjRriiVR/#/pageone में परिवर्तन देखने के लिए)। कोणीय डिफ़ॉल्ट रूप से आपके यूआरएल में दूसरे # की अनुमति नहीं देगा, इस प्रकार प्रत्येक # पहले से बाहर निकल जाएगा, जिसके परिणामस्वरूप %23#: http://www.w3schools.com/tags/ref_urlencode.asp के लिए बचने वाला चरित्र है।

आप अपने .config ब्लॉक के लिए निम्न जोड़कर html5mode को सक्षम करने की कोशिश कर सकते: कि आपकी समस्या का समाधान नहीं है, तो

$locationProvider.html5Mode({ 
    enabled: true 
}); 

, या यदि आप समर्थन IE8 समर्थन करने के लिए की जरूरत है, अपने सबसे अच्छे शर्त शायद होगा $anchorScroll() का उपयोग करें।

Here's the documentation।

अपने अनुप्रयोग में, आप का id गुजारें सकता div आप अपने यूआरएल में पैरामीटर के रूप ($routeParams या ui-रूटर के $stateParams का प्रयोग करके) के लिए स्क्रॉल करने के लिए, और फिर एक समारोह है कि तुरंत पर कि div के लिए स्क्रॉल जाएगा फोन चाहते हैं पृष्ठ लोड, जैसे:

How to handle anchor hash linking in AngularJS

:

$scope.scrollTo = function(id) { 
    $location.hash(id); 
    $anchorScroll(); 
} 

कृपया यह भी कि कैसे अपनी विशिष्ट समस्या के लिए $anchorScroll() का उपयोग करने पर एक अधिक विस्तृत विवरण के लिए निम्नलिखित पढ़

अर्थात्, इस विशेष खंड:

अपने कोणीय मार्ग हमेशा की तरह है, तो बस निम्नलिखित कोड जोड़ने के सेट करें।

app.run(function($rootScope, $location, $anchorScroll, $routeParams) { 
    //when the route is changed scroll to the proper element. 
    $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) { 
    $location.hash($routeParams.scrollTo); 
    $anchorScroll(); 
    }); 
}); 

और अपने लिंक इस तरह दिखेगा:

<a href="#/test?scrollTo=foo">Test/Foo</a> 

Answer 3

$ location.path (पेज);

केवल $ location, जोड़कर अपने नियंत्रक में निर्भरता जोड़ें, यह विधि आपको बिना किसी त्रुटि के इस मार्ग पर रीडायरेक्ट करती है।

Answer 4

एनजी पुस्तक में, वहाँ कुछ %13 के बारे में संकेत सामान्य पत्र की जगह है। दुर्भाग्यवश, यह अलग-अलग विषय के बारे में है - यह आरईएसटी के माध्यम से लगभग $ http या xhr एपीआई कॉल है, जहां दो मोड हैं (वही होगा) - एक सामान्य मोड और दूसरा JQuery जैसे। यह पता चला कि jquery arr[]=1 जैसी चीजों के लिए इन %13 संकेतों को जोड़ता है।

मैं ऐसा क्यों कह रहा हूँ? क्योंकि समाधान के बाद पुस्तकालयों और कार्यों को आता है जो मामूली स्थितियों का समर्थन करते हैं।

आपका प्रश्न में स्थिति काफी सरल है। $ स्थान सेवा है, जो समाधान है और यूआरएल दो मोड में सिमिलरी बनाई गई है, जो हैंशबैंग हैं और हैशबैंग नहीं हैं।

jQuery पैरामीटर, सामान्य करने के लिए jQuery मापदंडों का आदान प्रदान के लिए पुस्तकालय प्रदान की डेवलपर्स के साथ समस्या में

। वहाँ कई कन्वर्टर्स वास्तविक जीवन में, दस्तावेज़ आदि

कृपया इस book में कम अध्याय को देखने के लिए पीडीएफ की तरह हैं।

यह कहा गया है कि एचटीएमएल 5 मोड में, आप यूआरएल में दो हैश नहीं हो सकता है, लेकिन hashbang मोड में आप कर सकते हैं। ब्राउज़र नहीं जानता कि हैशबैंग मोड में कौन सा हैश जाना है। इसके लिए समर्थन एंकरस्क्रॉल सेवा है।

मैं जाँच नहीं की है, तो यह इस मामले में काम करता है लेकिन AnchorScrollProvider के साथ अपने ऐप्स कॉन्फ़िगर करने का प्रयास करें: जैसा कि मैंने लिखा है, आप अपने ऐप्लिकेशन में किसी भी स्थान पर $anchorService सेवा इंजेक्षन कर सकते हैं (

.config(function($anchorScrollProvider){ 
    $anchorScrollProvider.disableAutoScrolling(); 
}); 

फिर विशेष रूप से नियंत्रक में some-div-id div) को देखने के लिए बाध्य किया गया है और किसी भी चुने हुए समय पर इस सेवा के anchorScroll() पर कॉल करें।

मैं अभी इसका परीक्षण नहीं कर सकता इसलिए यह सैद्धांतिक उत्तर है।

Answer 5

मुझे पहले एक ही समस्या थी और this post ने मेरी मदद की। आइए आशा करते हैं कि यह आपकी मदद करने जा रहा है, अगर यह मुझे नहीं बताता है तो मैं आपको एक और समाधान खोजने में मदद कर सकता हूं।

शुभकामनाएं।