অ্যাঙ্গুলারজেএস-এ অ্যাঙ্কর হ্যাশ লিঙ্কিং কীভাবে পরিচালনা করবেন

Question

আপনার মধ্যে কেউ কীভাবে অ্যাঙ্গুলারজেএস-তে অ্যাঙ্কর হ্যাশ লিঙ্কিংয়ে সুন্দরভাবে পরিচালনা করতে হয় ?

একটি সাধারণ FAQ- পৃষ্ঠার জন্য আমার নীচের মার্কআপ রয়েছে

<a href="#faq-1">Question 1</a>
<a href="#faq-2">Question 2</a>
<a href="#faq-3">Question 3</a>

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="fa1-3">Question 3</h3>

উপরের যে কোনও লিঙ্কগুলিতে ক্লিক করার সময় অ্যাংুলারজেএস ইন্টারসেপ্ট করে এবং আমাকে সম্পূর্ণ ভিন্ন পৃষ্ঠায় নিয়ে যায় (আমার ক্ষেত্রে, লিঙ্কগুলির সাথে মেলে কোনও রুট না থাকায় একটি 404-পৃষ্ঠা))

আমার প্রথম চিন্তা ছিল " / FAQ /: অধ্যায় " এর সাথে মিলে যাওয়া একটি রুট তৈরি করা এবং এটির সাথে মিলে $routeParams.chapterযাওয়া উপাদানগুলির সাথে সংশ্লিষ্ট নিয়ন্ত্রকের চেক এবং তারপরে স্ক্রোল করতে jQuery ব্যবহার করা।

তবে তারপরে অ্যাংুলারজেএস আবার আমার উপর ছিটকে পড়ে এবং যেভাবেই কেবল পৃষ্ঠার শীর্ষে স্ক্রোল করে।

সুতরাং, এখানে যে কেউ অতীতে অনুরূপ কিছু করেছিল এবং এর একটি ভাল সমাধান জানে?

সম্পাদনা করুন: এইচটিএমএল 5 মডে স্যুইচ করাতে আমার সমস্যার সমাধান হওয়া উচিত তবে আমরা IE8 + কে যাইহোক সমর্থন করতে হবে তাই আমি আশঙ্কা করি যে এটি কোনও গ্রহণযোগ্য সমাধান নয়: /

Comments

আমি মনে করি কৌণিক ng-href=""পরিবর্তে ব্যবহার করার পরামর্শ দেয় ।

— পিগিগ্যাক

আমি মনে করি এনজি-হ্রেফ কেবল তখনই প্রযোজ্য যদি ইউআরএলে ডায়নামিক ডেটা থাকে যা কোনও এনজি-মডেলের সাথে আবদ্ধ হওয়া দরকার। আমি যদি অবাক হয়ে থাকি যে আপনি যদি লোকেশনপ্রভাইডারে হ্যাশপ্রফিক্স বরাদ্দ করেন তবে যদি এটি লিঙ্কটির আইডি'র দিকে অগ্রাহ্য করে: ডকস.আঙ্গুলারজ.স.আর

— অ্যাডাম

অ্যাডাম এনজি-হেরেফ ব্যবহারের ক্ষেত্রে সঠিক।

— রাসমাস

অ্যাঙ্গুলারজগুলিতে অ্যাঙ্কর লিঙ্কগুলির

— মিশাল বেঞ্জামিন সেরেন্স

এই এছাড়াও জন্য নতুন কৌণিক একটি বিষয় stackoverflow.com/questions/36101756/...

— phil294

Answer 1

আপনি খুঁজছেন $anchorScroll()।

এখানে (ক্রপী) ডকুমেন্টেশন রয়েছে।

এবং এখানে উত্স।

মূলত আপনি এটি কেবল ইনজেক্ট করে একে আপনার নিয়ামককে কল করুন এবং এটি আপনাকে খুঁজে পাওয়া আইডি সহ যে কোনও উপাদানে স্ক্রোল করবে will $location.hash()

app.controller('TestCtrl', function($scope, $location, $anchorScroll) {
   $scope.scrollTo = function(id) {
      $location.hash(id);
      $anchorScroll();
   }
});

<a ng-click="scrollTo('foo')">Foo</a>

<div id="foo">Here you are</div>

এখানে প্রদর্শনের জন্য একজন নিমন্ত্রক

সম্পাদনা: রাউটিং সহ এটি ব্যবহার করতে

আপনার কৌণিক রাউটিংটি যথারীতি সেট আপ করুন, তারপরে কেবল নীচের কোডটি যুক্ত করুন।

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>

এখানে একটি প্লাঙ্কার রাউটিং এবং $ অ্যাঙ্করস্ক্রোল সহ স্ক্রোলিং প্রদর্শন করছে

এমনকি সহজ:

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

এবং আপনার লিঙ্কটি দেখতে এইরকম হবে:

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

Comments

আপনি যখন রাউটিং যুক্ত করবেন তখন সমস্যা আসতে পারে: এনজিভি যোগ করা হলে ইউআরএল এর প্রতিটি হ্যাশ পরিবর্তনের ফলে রুট পুনরায় লোড শুরু হয় ... আপনার উদাহরণে কোনও রাউটিং নেই এবং ইউআরএল বর্তমান আইটেমকে প্রতিফলিত করে না ... তবে $ অ্যাঙ্করস্ক্রোল

— ভ্যালেন্টাইন শাইবানভের

@blesh, কলিং লোকেশন.হ্যাশ (এক্স) পৃষ্ঠা পরিবর্তন করে যেহেতু রাউটিং দর্শনগুলি নিয়ন্ত্রণ করে।

— dsldsl

এই সমাধানটি আমার পুরো অ্যাপ্লিকেশনটিকে পুনরায় রেন্ডার করে।

@dsldsl &&OlverJosephAsh:। অবস্থান.hash () পৃষ্ঠাটি পুনরায় লোড করবে না। যদি তা হয় তবে অন্য কিছু চলছে। পৃষ্ঠাটি লোড হওয়ার সাথে সাথে সময়টি লেখার সাথে সাথে এখানে একই নিমজ্জন রয়েছে, আপনি দেখতে পাবেন এটি পরিবর্তন হবে না আপনি যদি রুটটি পুনরায় লোড না করে বর্তমান পৃষ্ঠায় কোনও অ্যাঙ্কর ট্যাগটিতে স্ক্রোল করতে চান, আপনি কেবল একটি কাজ করতে চান নিয়মিত লিঙ্ক <a href="#foo">foo</a>। আমার কোডের নমুনাটি ছিল রুটচেঞ্জের কোনও আইডিতে স্ক্রোলিং দেখানো।

— বেন লেশ

@blesh: আমি আপনাকে পছন্দসই বিভাগে স্ক্রোল করার পরে হ্যাশটি সরিয়ে ফেলার পরামর্শ দিচ্ছি, এইভাবে URL টি এমন স্টাফ দিয়ে দূষিত নয় যা আসলে সেখানে না থাকা উচিত। এটি ব্যবহার করুন: $location.search('scrollTo', null)

— কুমারহর্স

Answer 2

আমার ক্ষেত্রে, আমি লক্ষ্য করেছি যে রাউটিং যুক্তিবিজ্ঞান যদি আমি পরিবর্র্তিত সুস্থ ও সক্রিয় হয় $location.hash()। নিম্নলিখিত কৌশলটি কাজ করেছে ..

$scope.scrollTo = function(id) {
    var old = $location.hash();
    $location.hash(id);
    $anchorScroll();
    //reset to old to keep any additional routing logic from kicking in
    $location.hash(old);
};

Comments

উজ্জ্বল ধন্যবাদ, এর জন্য রাউটিং যুক্তি @ ব্লেশের .run (...) সমাধানটি ব্যবহার করার পরেও একেবারে আচরণ করতে অস্বীকার করেছিল এবং এটি এটিকে সাজায়।

— ljs

আপনার "পুরাতন হ্যাশ সংরক্ষণ" কৌশলটি পরম জীবনকালীন হয়েছে। এটি রুট পরিষ্কার রাখার সময় পৃষ্ঠাটি পুনরায় লোডগুলি প্রতিরোধ করে। অসাধারণ ধারণা!

— লানহাম

সুন্দর. তবে আপনার সমাধানটি কার্যকর করার পরে, ইউআরএল লক্ষ্য আইডির মান আপডেট করছে না।

— মোহাম্মদ হুসেন

মোহামেদের মতো আমারও একই অভিজ্ঞতা ছিল ... এটি সত্যই পুনরায় লোড বন্ধ করে দিয়েছে তবে এটি হ্যাশলেস রুটটি প্রদর্শন করে (এবং ch অ্যাঙ্কারস্ক্রোলটির কোনও প্রভাব ছিল না)। 1.2.6 হুঁ মিমি mm

— মাইকেল 21

আমি ব্যবহার $location.hash(my_id); $anchorScroll; $location.hash(null)। এটি পুনরায় লোড প্রতিরোধ করে এবং আমাকে oldভেরিয়েবলটি পরিচালনা করতে হবে না ।

— এমএফবি

Answer 3

target="_self"লিঙ্কগুলি তৈরি করার সময় কোনও রাউটিং বা অন্য কিছু ব্যবহার করার দরকার নেই

উদাহরণ:

<a href="#faq-1" target="_self">Question 1</a>
<a href="#faq-2" target="_self">Question 2</a>
<a href="#faq-3" target="_self">Question 3</a>

এবং idআপনার এইচটিএমএল উপাদানগুলিতে এই বৈশিষ্ট্যটি ব্যবহার করুন :

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="faq-3">Question 3</h3>

মন্তব্যগুলিতে পয়েন্ট / উল্লিখিত হিসাবে ## ব্যবহার করার দরকার নেই ;-)

Comments

এটি আমার জন্য কাজ করে নি, কিন্তু সমাধান এখানে যা করেছে: stackoverflow.com/a/19367249/633107

— Splaktar

এই সমাধানের জন্য ধন্যবাদ। তবে লক্ষ্য = "_ স্ব" যথেষ্ট। দ্বিগুণ করার দরকার নেই #

— ক্রিস্টোফ পি

টার্গেট = "_ স্ব" অবশ্যই সেরা উত্তর (ক্রিস্টোফ পি দ্বারা নির্দেশিত হিসাবে, # দ্বিগুণ করার প্রয়োজন নেই)। এইচটিএমএল 5 মডেড চালু বা বন্ধ থাকে তা বিবেচ্য নয়।

— নিউম্যান

সহজ এবং সম্পূর্ণ। আরও একটি কৌণিক নির্ভরতা যুক্ত করার প্রয়োজন ছাড়াই আমার জন্য কাজ করে।

— এডিডি

এটিই সঠিক সমাধান। কৌনিক $ অ্যাঙ্করস্ক্রোল পরিষেবা জড়িত করার প্রয়োজন নেই। একটি ট্যাগের জন্য ডকুমেন্টেশন দেখুন: https://developer.mozilla.org/en/docs/Web/HTML/Element/a

— ইয়িলিং

Answer 4

<a href="##faq-1">Question 1</a>
<a href="##faq-2">Question 2</a>
<a href="##faq-3">Question 3</a>

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="faq-3">Question 3</h3>

Comments

অসাধারণ! এতদূর সহজ সমাধান, তবে কোনও ধারণা কীভাবে কোনও পৃথক পৃষ্ঠায় কোনও অ্যাঙ্কারের সাথে লিঙ্ক করবেন? (অর্থাত্ / পণ্য # পুস্তক)

— 8

আমি মনে করি এটি AngularJS- এ সমাধান (/ পণ্য ## বই) হিসাবে একই

— লিঙ্কলজ

আমার অভিজ্ঞতা থেকে, href = "##" কেবল তখনই কাজ করে যখন $ অ্যাঙ্করস্ক্রোল ইনজেকশন করা হয়।

— ব্রায়ান পার্ক

এটি তুলনামূলক সহজ বলে মনে হচ্ছে তবে এটি কাজ করছে না :-(

— ব্রাইকনেভাল

আমি টার্গেট = "_ স্ব" যুক্ত করেছি এবং এটি পৃষ্ঠার মধ্যে সমস্ত ধরণের নেভিগেশনের জন্য আকর্ষণীয় কাজ করেছে (স্লাইডারগুলি পড়ুন, বিভিন্ন বিভাগে যান ইত্যাদি)। এই দুর্দান্ত এবং সহজ কৌশলটি ভাগ করে নেওয়ার জন্য আপনাকে ধন্যবাদ।

— কুমার নীতেশ

Answer 5

আপনি যদি সর্বদা রুটটি জানেন তবে আপনি সহজেই এই জাতীয় অ্যাঙ্করটি যুক্ত করতে পারেন:

href="#/route#anchorID

routeবর্তমান কৌনিক রুটটি কোথায় এবং পৃষ্ঠার কোথাও কোথাও anchorIDমেলে<a id="anchorID">

Comments

এটি একটি সাধারণ কৌণিক জেএস রুটের পরিবর্তনকে ট্রিগার করে এবং তাই নিরুৎসাহিত হয়। আমার ক্ষেত্রে এটি খুব দর্শনীয় ছিল যেহেতু FAQ / সহায়তা পৃষ্ঠায় ইউটিউব ভিডিওগুলি পুনরায় লোড হয়েছিল।

— রবিন অ্যান্ডারসন

@ রবিনওয়াসন-অ্যান্ডারসন reloadOnSearch: falseআপনার রুট কনফিগারেশনে সেই রুটের জন্য নির্দিষ্ট করে কৌণিক কোনও রুট পরিবর্তনকে ট্রিগার করবে না এবং কেবল আইডিতে স্ক্রোল করবে। aট্যাগে উল্লিখিত পুরো রুটের সাথে একত্রে আমি বলব এটি হ'ল সহজ এবং সর্বাধিক সরল সমাধান।

— এলিস

ধন্যবাদ. এটি আমাকে সাহায্য করেছিল। আমি আমার অ্যাপ্লিকেশনটিতে কোনও কাস্টম রুট ব্যবহার করি না, সুতরাং একটি href = "# / # অ্যাঙ্কর-নাম" করা দুর্দান্ত কাজ করেছে!

— জর্ডান

Answer 6

$anchorScroll এটির জন্য কাজ করে তবে অ্যাঙ্গুলারের আরও সাম্প্রতিক সংস্করণগুলিতে এটি ব্যবহারের আরও ভাল উপায় রয়েছে।

এখন, $anchorScrollহ্যাশটিকে একটি alচ্ছিক আর্গুমেন্ট হিসাবে গ্রহণ করে, সুতরাং আপনাকে কোনও পরিবর্তন করতে হবে না $location.hash। ( ডকুমেন্টেশন )

এটি সর্বোত্তম সমাধান কারণ এটি রুটটিকে মোটেই প্রভাবিত করে না। আমি আর কোনও সমাধান কাজ করতে পারিনি কারণ আমি এনজিআরউটি ব্যবহার করছি এবং রুটটি সেট করার সাথে সাথেই পুনরায় লোড হবে $location.hash(id), এর আগে $anchorScrollযাদু করার আগে ।

এটি কীভাবে ব্যবহার করবেন তা এখানে রয়েছে ... প্রথমে নির্দেশ বা কন্ট্রোলারে:

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

এবং তারপরে দেখুন:

<a href="" ng-click="scrollTo(id)">Text</a>

এছাড়াও, যদি আপনার কোনও স্থির নববারের (বা অন্যান্য ইউআই) অ্যাকাউন্টের প্রয়োজন হয় তবে আপনি like অ্যাঙ্করস্ক্রোলের জন্য অফসেটটি সেট করতে পারেন (মূল মডিউলটির রান ফাংশনে):

.run(function ($anchorScroll) {
   //this will make anchorScroll scroll to the div minus 50px
   $anchorScroll.yOffset = 50;
});

Comments

ধন্যবাদ। রুট পরিবর্তনের সাথে সংযুক্ত হ্যাশ লিঙ্কটির জন্য আপনি কীভাবে আপনার কৌশলটি বাস্তবায়ন করবেন? উদাহরণ: এই নাভ আইটেমটি ক্লিক করুন, যা আলাদা ভিউটি খুলবে idএবং সেই ভিউতে একটি নির্দিষ্ট জায়গায় স্ক্রোল করে ।

— কাইল ভ্যাসেলা

পিসটারে দেরি করে .. আপনি যদি চান্স পান তবে আমার স্ট্যাক প্রশ্নটিকে এক নজরে দিতে পারেন? আমি মনে করি আপনার উত্তরটি এখানে আমাকে এত কাছে পেয়েছে তবে আমি কেবল এটি বাস্তবায়ন করতে পারি না: stackoverflow.com/questions/41494330/… । আমিও ব্যবহার করছি ngRouteএবং কৌণিকের আরও নতুন সংস্করণ।

— কাইল ভ্যাসেলা

আমি দুঃখিত যে আমি সেই বিশেষ কেসটি চেষ্টা করে দেখিনি ... তবে আপনি কি। লোকেশন.সার্চ () বা $ রুটপ্যারামগুলি একবার দেখেছেন ? সম্ভবত আপনি নিজের নিয়ন্ত্রকের সূচনাতে এক বা অন্যটি ব্যবহার করতে পারেন - যদি আপনার স্ক্রোলটো অনুসন্ধানের প্যারামটি ইউআরএলটিতে থাকে, তবে নিয়ামক পৃষ্ঠাটি স্ক্রোল করতে উপরে হিসাবে অ্যাঙ্করস্ক্রোল ব্যবহার করতে পারেন could

— রেবেকা

আইডিটি সরাসরি $ অ্যাঙ্কারস্ক্রোলে পাস করার মাধ্যমে, আমার রুটগুলি / যোগাযোগ # পরিচিতি থেকে কেবল / যোগাযোগের মতো কিছু থেকে পরিবর্তিত হয়েছে। এটি ইমো গ্রহণযোগ্য উত্তর হওয়া উচিত।

— র্যান্ডম ইউএস 1

Answer 7

এটি আমার একটি নির্দেশিকা ব্যবহার করে সমাধান হয়েছিল যা আরও কৌণিক- y বলে মনে হয় কারণ আমরা DOM এর সাথে কাজ করছি:

এখানে Plnkr

GitHub

কোড

angular.module('app', [])
.directive('scrollTo', function ($location, $anchorScroll) {
  return function(scope, element, attrs) {

    element.bind('click', function(event) {
        event.stopPropagation();
        var off = scope.$on('$locationChangeStart', function(ev) {
            off();
            ev.preventDefault();
        });
        var location = attrs.scrollTo;
        $location.hash(location);
        $anchorScroll();
    });

  };
});

এইচটিএমএল

<ul>
  <li><a href="" scroll-to="section1">Section 1</a></li>
  <li><a href="" scroll-to="section2">Section 2</a></li>
</ul>

<h1 id="section1">Hi, I'm section 1</h1>
<p>
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. 
 Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. 
Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. 
Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
</p>

<h1 id="section2">I'm totally section 2</h1>
<p>
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. 
 Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. 
Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. 
Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
</p>

আমি $ অ্যাঙ্করস্ক্রোল পরিষেবাটি ব্যবহার করেছি। পেজ-রিফ্রেশের প্রতিরোধ করার জন্য যা হ্যাশ পরিবর্তনের পাশাপাশি চলেছে আমি এগিয়ে গিয়ে অবস্থানের চেঞ্জস্টার্ট ইভেন্টটি বাতিল করে দিয়েছি। এটি আমার পক্ষে কাজ করেছিল কারণ আমার একটি সহায়তা পৃষ্ঠাটি একটি এনজি-স্যুইচ পর্যন্ত ছড়িয়ে পড়েছিল এবং রিফ্রেশগুলি অ্যাপ্লিকেশনটিকে প্রয়োজনীয়ভাবে ভেঙে দেবে।

Comments

আমি আপনার নির্দেশিকা সমাধান পছন্দ। তবে আপনি কীভাবে এটি করবেন আপনি অন্য পৃষ্ঠাটি লোড করতে এবং একই সাথে অ্যাঙ্কর অবস্থানে স্ক্রোল করতে চেয়েছিলেন। অ্যাঙ্গুলারজগুলি ব্যতীত এটি হ্রেফ = "অবস্থান # হ্যাশ" হতে পারে। তবে আপনার নির্দেশিকাটি পৃষ্ঠা পুনরায় লোড প্রতিরোধ করে।

— সিএমসিডিগ্রাগনকাই

আমার নির্দেশনার সাথে সিএমসিডিআর্যাগনকাই, আমি নিশ্চিত নই কারণ আমি $ অ্যাঙ্করস্ক্রোলটিতে কলটি ব্যবহার করেছি যা দেখতে পাতায় কেবলমাত্র কোনও উপাদানটিতে স্ক্রোলিংয়ের মতো দেখায়। আপনার সাথে জগাখিচুড়ি থাকতে পারে $ অবস্থান বা $ জানালা পৃষ্ঠার একটি পরিবর্তন জড়িত কিছু পেতে।

— খলিল রাভান্না

আপনাকে লোকেশন চেঞ্জস্টার্ট ইভেন্ট থেকে সদস্যতা ত্যাগ করতে হবে: var অফ = সুযোগ।

@ ইউজেনটিসখোভেরেভভকে ভাল করে ধরলাম, আমি এগিয়ে গিয়ে একটি সম্পাদনায় উত্তরটি যুক্ত করেছি।

— খলিল রাবণ্না

Answer 8

কৌণিক রুটের জন্য একটি হ্যাশ উপসর্গ সেট করার চেষ্টা করুন $locationProvider.hashPrefix('!')

সম্পূর্ণ উদাহরণ:

angular.module('app', [])
  .config(['$routeProvider', '$locationProvider', 
    function($routeProvider, $locationProvider){
      $routeProvider.when( ... );
      $locationProvider.hashPrefix('!');
    }
  ])

Comments

এটি ফলাফলকে প্রভাবিত করে না। যদিও এটি মিষ্টি হবে।

— রাসমাস

তুমি কি নিশ্চিত. কেন এই কাজ করে না? যদি হ্যাশ উপসর্গ হয়!, তবে হ্যাশ রাউটিংটি #! পৃষ্ঠা হওয়া উচিত। সুতরাং অ্যাঙ্গুলারজেএস সনাক্ত করা উচিত যখন এটি কেবল একটি # হ্যাশ হয়, এটি স্বয়ংক্রিয়ভাবে স্ক্রোলটি অ্যাঙ্কর করে এবং এইচটিএমএল 5 মোড url এবং হ্যাশ মোড url উভয়ের জন্য কাজ করা উচিত for

— সিএমসিডিগ্রাগনকাই

Answer 9

আমি আমার অ্যাপ্লিকেশনটির জন্য রুট লজিক এটিকে প্রায় পেয়েছি।

function config($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: '/partials/search.html',
      controller: 'ctrlMain'
    })
    .otherwise({
      // Angular interferes with anchor links, so this function preserves the
      // requested hash while still invoking the default route.
      redirectTo: function() {
        // Strips the leading '#/' from the current hash value.
        var hash = '#' + window.location.hash.replace(/^#\//g, '');
        window.location.hash = hash;
        return '/' + hash;
      }
    });
}

Comments

এটি কাজ করে না: ত্রুটি: [ject ইনজেক্টর: মডিউলার] এর কারণে মডিউল কোণ ইনস্ট্যান্ট করতে ব্যর্থ হয়েছে: ত্রুটি: কখন ()

— 34

Answer 10

এটি একটি পুরাতন পোস্ট, তবে আমি বিভিন্ন সমাধান নিয়ে গবেষণা করতে দীর্ঘ সময় ব্যয় করেছি তাই আমি আরও একটি সাধারণ পোস্ট ভাগ করতে চাই। কেবল ট্যাগে যুক্ত target="_self"করা <a>আমার জন্য এটি স্থির করে। লিঙ্কটি কাজ করে এবং আমাকে পৃষ্ঠায় যথাযথ স্থানে নিয়ে যায়।

তবে, কৌনিক এখনও ইউআরএলের # এর সাথে কিছু অদ্ভুততা সংক্রামিত করে যাতে আপনি নেভিগেশনের জন্য পিছনের বোতামটি ব্যবহার করতে এবং যেমন এই পদ্ধতিটি ব্যবহারের পরে সমস্যায় পড়তে পারেন।

Answer 11

এটি এনজিভিউর জন্য একটি নতুন বৈশিষ্ট্য হতে পারে তবে আমি এন্টিবিউট এবং 'ডাবল-হ্যাশ' angular-routeব্যবহার করে এটি অ্যাঙ্কর হ্যাশ লিঙ্কগুলি পেতে সক্ষম হয়েছি ngView autoscroll।

এনজিভিউ (অটস্ক্রোল দেখুন)

(নিম্নলিখিত কোডটি কৌনিক-স্ট্র্যাপের সাথে ব্যবহৃত হয়েছিল)

<!-- use the autoscroll attribute to scroll to hash on $viewContentLoaded -->    
<div ng-view="" autoscroll></div>

<!-- A.href link for bs-scrollspy from angular-strap -->
<!-- A.ngHref for autoscroll on current route without a location change -->
<ul class="nav bs-sidenav">
  <li data-target="#main-html5"><a href="#main-html5" ng-href="##main-html5">HTML5</a></li>
  <li data-target="#main-angular"><a href="#main-angular" ng-href="##main-angular" >Angular</a></li>
  <li data-target="#main-karma"><a href="#main-karma" ng-href="##main-karma">Karma</a></li>
</ul>

Answer 12

আমি এইভাবে এটি করতে পারে:

<li>
<a href="#/#about">About</a>
</li>

Answer 13

এখানে কাস্টম ডাইরেক্টিভ তৈরি করে এক ধরণের নোংরা কাজ রয়েছে যা নির্দিষ্ট উপাদানগুলিতে স্ক্রোল করবে (হার্ডকোডযুক্ত "FAQ" সহ)

app.directive('h3', function($routeParams) {
  return {
    restrict: 'E',
    link: function(scope, element, attrs){        
        if ('faq'+$routeParams.v == attrs.id) {
          setTimeout(function() {
             window.scrollTo(0, element[0].offsetTop);
          },1);        
        }
    }
  };
});

http://plnkr.co/edit/Po37JFeP5IsNoz5ZycFs?p=preview

Comments

এটি সত্যিই কাজ করে, তবে এটি যেমনটি আপনি বলেছেন, নোংরা। খুব নোংরা. আসুন দেখুন অন্য কোনও সুন্দর সমাধান নিয়ে আসতে পারে কিনা তা আমাকে দেখুন বা এটি নিয়ে যেতে হবে।

— রাসমাস

কৌণিকটির মধ্যে ইতিমধ্যে স্ক্রোলটো কার্যকারিতা রয়েছে $anchorScroll, আমার উত্তর দেখুন।

— বেন লেশ

প্লাঙ্কারকে কম নোংরা হিসাবে পরিবর্তিত হয়েছে: এটি $ লোকেশন.পথ () ব্যবহার করে তাই উত্সটিতে কোনও হার্ডকোডযুক্ত "FAQ" নেই। এবং $ অ্যাঙ্করস্ক্রোল ব্যবহার করার চেষ্টাও করেছিলেন, তবে রাউটিংয়ের কারণে এটি কার্যকর হয় না বলে মনে হচ্ছে ...

— ভ্যালেন্টাইন শায়বানভ

Answer 14

<a href="/#/#faq-1">Question 1</a>
<a href="/#/#faq-2">Question 2</a>
<a href="/#/#faq-3">Question 3</a>

Answer 15

আপনি যদি ng-clickএখানে ব্যবহার করতে পছন্দ না করেন তবে একটি বিকল্প সমাধান রয়েছে। এটি filterবর্তমান অবস্থার উপর নির্ভর করে সঠিক url উত্পন্ন করতে একটি ব্যবহার করে । আমার উদাহরণটি ui.router ব্যবহার করে ।

সুবিধাটি হ'ল ব্যবহারকারীটি লিঙ্কটি যেখানে হোভারে চলে তা দেখবে।

<a href="{{ 'my-element-id' | anchor }}">My element</a>

ফিল্টার:

.filter('anchor', ['$state', function($state) {
    return function(id) {
        return '/#' + $state.current.url + '#' + id;
    };
}])

Answer 16

এনজি-রুটের সাথে আমার সমাধানটি ছিল এই সহজ নির্দেশনা:

   app.directive('scrollto',
       function ($anchorScroll,$location) {
            return {
                link: function (scope, element, attrs) {
                    element.click(function (e) {
                        e.preventDefault();
                        $location.hash(attrs["scrollto"]);
                        $anchorScroll();
                    });
                }
            };
    })

এইচটিএমএল দেখতে এমন দেখাচ্ছে:

<a href="" scrollTo="yourid">link</a>

Comments

তোমার মত বৈশিষ্ট্য উল্লেখ করতে হতো না scroll-to="yourid"এবং নির্দেশ নাম scrollTo(এবং এটি অ্যাক্সেস করার অনুমতি অ্যাট্রিবিউট attrs["scrollTo"]সঙ্গে আবদ্ধ হতে হ্যান্ডলার এছাড়া explicite jQuery এর অন্তর্ভুক্তি ছাড়া করেছে? element.on('click', function (e) {..})।

— Theodros Zelleke

Answer 17

আপনি অ্যাঙ্করস্ক্রোলটি ব্যবহার করার চেষ্টা করতে পারেন ।

উদাহরণ

সুতরাং নিয়ামকটি হবেন:

app.controller('MainCtrl', function($scope, $location, $anchorScroll, $routeParams) {
  $scope.scrollTo = function(id) {
     $location.hash(id);
     $anchorScroll();
  }
});

এবং দর্শন:

<a href="" ng-click="scrollTo('foo')">Scroll to #foo</a>

... এবং অ্যাঙ্কর আইডির কোনও গোপন বিষয় নেই:

<div id="foo">
  This is #foo
</div>

Answer 18

আমি আমার অ্যাংুলার অ্যাপ্লিকেশনটিকে একটি অ্যাঙ্কর ওপেন লোডিংয়ে স্ক্রোল করার চেষ্টা করছিলাম এবং $ রুটপ্রভাইডারের URL রাইটিং রুলগুলিতে চলে গেলাম।

দীর্ঘ পরীক্ষার পরে আমি এটি স্থির করেছিলাম:

1. কৌণিক অ্যাপ মডিউলটির .run () বিভাগ থেকে একটি ডকুমেন্ট.অনলোড ইভেন্ট হ্যান্ডলারটি নিবন্ধ করুন register
2. হ্যান্ডলারের মধ্যে কিছু স্ট্রিং ক্রিয়াকলাপ করে মূল অ্যাঙ্কর ট্যাগটি থাকার কথা ছিল তা খুঁজে বার করুন।
3. ওভাররাইড লোকেশন.টি স্ট্রিপড ডাউন অ্যাঙ্কর ট্যাগ (যা "# /" নিয়মের সাথে সাথে তা পুনরায় ওভাররাইটের কারণ হয়ে যায় But তবে এটি ঠিক আছে, কারণ কৌনিকটি এখন ইউআরএল 4 এ যা চলছে তার সাথে সুসংগত হয়েছে) কল $ anchorScroll ()।

angular.module("bla",[]).}])
.run(function($location, $anchorScroll){
         $(document).ready(function() {
	 if(location.hash && location.hash.length>=1)    		{
			var path = location.hash;
			var potentialAnchor = path.substring(path.lastIndexOf("/")+1);
			if ($("#" + potentialAnchor).length > 0) {   // make sure this hashtag exists in the doc.                          
			    location.hash = potentialAnchor;
			    $anchorScroll();
			}
		}	 
 });

Answer 19

এটি যদি সর্বদা কাজ করে তবে আমি 100% নিশ্চিত নই, তবে আমার প্রয়োগে এটি আমাকে প্রত্যাশিত আচরণ দেয়।

বলুন যে আপনি প্রায় পৃষ্ঠায় আছেন এবং আপনার নীচের রুট রয়েছে:

yourApp.config(['$routeProvider', 
    function($routeProvider) {
        $routeProvider.
            when('/about', {
                templateUrl: 'about.html',
                controller: 'AboutCtrl'
            }).
            otherwise({
                redirectTo: '/'
            });
        }
]);

এখন, আপনার এইচটিএমএল

<ul>
    <li><a href="#/about#tab1">First Part</a></li>
    <li><a href="#/about#tab2">Second Part</a></li>
    <li><a href="#/about#tab3">Third Part</a></li>                      
</ul>

<div id="tab1">1</div>
<div id="tab2">2</div>
<div id="tab3">3</div>

উপসংহারে

অ্যাঙ্কারের আগে পৃষ্ঠার নাম সহ আমার জন্য কৌশলটি। আমাকে আপনার চিন্তাভাবনা সম্পর্কে জানাতে দিন।

downside

এটি পৃষ্ঠাটি পুনরায় রেন্ডার করবে এবং তারপরে অ্যাঙ্কারে স্ক্রোল করবে।

হালনাগাদ

আরও ভাল উপায় নিম্নলিখিত যুক্ত করা হয়:

<a href="#tab1" onclick="return false;">First Part</a>

Answer 20

আপনার স্ক্রোলিং বৈশিষ্ট্যটি সহজেই পান। এটি অতিরিক্ত বৈশিষ্ট্য হিসাবে অ্যানিমেটেড / স্মুথ স্ক্রোলিং সমর্থন করে । কৌণিক স্ক্রোল গ্রন্থাগারের জন্য বিশদ :

গিথুব - https://github.com/oblador/angular-scrol

বোর :bower install --save angular-scroll

এনপিএম :npm install --save angular-scroll

ক্ষুদ্র সংস্করণ - কেবল 9 কেবি

স্মুথ স্ক্রোলিং (অ্যানিমেটেড স্ক্রোলিং) - হ্যাঁ

স্ক্রোল স্পাই - হ্যাঁ

ডকুমেন্টেশন - দুর্দান্ত

ডেমো - http://oblador.github.io/angular-scrol/

আশাকরি এটা সাহায্য করবে.

Answer 21

@ সটায়ানের উপর ভিত্তি করে আমি নিম্নলিখিত সমাধান নিয়ে এসেছি:

app.run(function($location, $anchorScroll){
    var uri = window.location.href;

    if(uri.length >= 4){

        var parts = uri.split('#!#');
        if(parts.length > 1){
            var anchor = parts[parts.length -1];
            $location.hash(anchor);
            $anchorScroll();
        }
    }
});

Answer 22

রুট পরিবর্তনে এটি পৃষ্ঠার শীর্ষে স্ক্রোল করবে।

 $scope.$on('$routeChangeSuccess', function () {
      window.scrollTo(0, 0);
  });

এই কোডটি আপনার নিয়ামকের উপর রাখুন।

Answer 23

আমার মনে @ স্লাগস্লগ এটি ছিল তবে আমি একটি জিনিস পরিবর্তন করব। পরিবর্তে আমি প্রতিস্থাপনটি ব্যবহার করব যাতে আপনাকে এটি আর সেট করতে হবে না।

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

"পদ্ধতি প্রতিস্থাপন করুন" এর জন্য ডক্স অনুসন্ধান

Answer 24

উপরের সমাধানগুলির কোনওটিই আমার পক্ষে কাজ করে না, তবে আমি কেবল এটি চেষ্টা করেছি এবং এটি কার্যকর হয়েছে,

<a href="#/#faq-1">Question 1</a>

সুতরাং আমি বুঝতে পেরেছি সূচিপত্র পৃষ্ঠাটি শুরু করার জন্য পৃষ্ঠাটি সূচিত করতে হবে এবং তারপরে traditionalতিহ্যবাহী অ্যাঙ্করটি ব্যবহার করতে হবে।

Answer 25

অ্যাংুলারজেস অ্যাপ্লিকেশন হ্যাশ নেভিগেশন কিছু সময় কাজ করে না এবং বুটস্ট্র্যাপ jquery জাভাস্ক্রিপ্ট লাইব্রেরি এ জাতীয় নেভিগেশন target="_self"ট্যাগ যুক্ত করার জন্য, এ জাতীয় নেভিগেশন এর ব্যাপক ব্যবহার করে । যেমন<a data-toggle="tab" href="#id_of_div_to_navigate" target="_self">

Answer 26

Https://code.angularjs.org/1.4.10/docs/api/ngRoute/provider/ দেখুন $ routeProvider

[পুনরায় লোডঅনসন্ধান = সত্য] - {বুলিয়ান =} - পুনরায় লোড করুন যখন কেবল $ লোকেশন.সার্ক () বা $ লোকেশন.হ্যাশ () পরিবর্তন হয়।

এটিকে মিথ্যা হিসাবে সেট করা আমার পক্ষে উপরের সমস্তটি ছাড়াই কৌশল করে।

Answer 27

আমি AngularJS 1.3.15 ব্যবহার করছি এবং দেখে মনে হচ্ছে আমাকে বিশেষ কিছু করতে হবে না।

https://code.angularjs.org/1.3.15/docs/api/ng/provider/ ch অ্যাঙ্করস্ক্রোলপ্রাইডার

সুতরাং, নিম্নলিখিতটি আমার এইচটিএমএলে আমার জন্য কাজ করে:

<ul>
  <li ng-repeat="page in pages"><a ng-href="#{{'id-'+id}}">{{id}}</a>
  </li>
</ul>
<div ng-attr-id="{{'id-'+id}}" </div>

আমাকে আমার নিয়ামক বা জাভাস্ক্রিপ্টে কোনও পরিবর্তন করতে হবে না।