วิธีจัดการกับการเชื่อมโยงแฮช Anchor ใน AngularJS

คุณใด ๆ รู้วิธีจัดการการเชื่อมโยงแฮ็กสมอในAngularJS ?

ฉันมีมาร์กอัปต่อไปนี้สำหรับหน้าคำถามที่พบบ่อยอย่างง่าย

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

เมื่อคลิกที่ลิงค์ด้านบนใด ๆ AngularJS จะสกัดกั้นและกำหนดเส้นทางให้ฉันไปยังหน้าอื่นอย่างสมบูรณ์ (ในกรณีของฉันหน้า 404 เนื่องจากไม่มีเส้นทางที่ตรงกับลิงก์)

ความคิดแรกของฉันคือการสร้างการจับคู่เส้นทาง " / faq /: ตอน " และในการตรวจสอบตัวควบคุมที่เกี่ยวข้อง$routeParams.chapterหลังจากองค์ประกอบที่ตรงกันแล้วใช้ jQuery เพื่อเลื่อนลงไป

แต่แล้ว AngularJS ก็มาหาฉันอีกแล้วเลื่อนไปที่ด้านบนของหน้า

ดังนั้นทุกคนที่นี่ทำสิ่งที่คล้ายกันในอดีตและรู้วิธีแก้ปัญหาที่ดีหรือไม่

แก้ไข: การเปลี่ยนเป็น html5Mode ควรแก้ปัญหาของฉัน แต่เราต้องรองรับ IE8 + ต่อไปดังนั้นฉันจึงกลัวว่าไม่ใช่วิธีแก้ปัญหาที่ยอมรับ: /

$anchorScroll()คุณกำลังมองหา

นี่คือเอกสาร (เส็งเคร็ง)

และนี่คือที่มา

โดยทั่วไปคุณเพียงแค่ฉีดและเรียกมันในตัวควบคุมของคุณและมันจะเลื่อนคุณไปยังองค์ประกอบใด ๆ ที่มีรหัสที่พบมา $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>

นี่คือPlunker ที่แสดงการเลื่อนด้วยการกำหนดเส้นทางและ $ anchorScroll

และง่ายยิ่งขึ้น:

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>

$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);
};

ไม่จำเป็นต้องเปลี่ยนเส้นทางหรือสิ่งอื่นใดเพียงแค่ต้องใช้ 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แอตทริบิวต์ในองค์ประกอบhtmlของคุณดังนี้:

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

ไม่จำเป็นต้องใช้ ## ตามที่แหลม / กล่าวถึงในความคิดเห็น ;-)

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

หากคุณรู้เส้นทางเสมอคุณสามารถต่อท้ายจุดยึดได้ดังนี้

href="#/route#anchorID

ที่routeเป็นเส้นทางเชิงมุมปัจจุบันและanchorIDตรงกับ<a id="anchorID">ที่ใดที่หนึ่งบนหน้าเว็บ

$anchorScroll ใช้งานได้ แต่มีวิธีที่ดีกว่ามากในการใช้กับ Angular รุ่นใหม่กว่า

ตอนนี้$anchorScrollยอมรับการแฮชเป็นอาร์กิวเมนต์ที่เป็นตัวเลือกดังนั้นคุณไม่จำเป็นต้องเปลี่ยน$location.hashเลย ( เอกสาร )

นี่เป็นทางออกที่ดีที่สุดเพราะไม่กระทบเส้นทางเลย ฉันไม่สามารถแก้ไขปัญหาอื่น ๆ ให้ทำงานได้เพราะฉันใช้ ngRoute และเส้นทางจะโหลดใหม่ทันทีที่ฉันตั้งค่า$location.hash(id)ก่อนที่จะ$anchorScrollสามารถใช้เวทมนตร์

นี่คือวิธีการใช้งาน ... อันดับแรกในคำสั่งหรือตัวควบคุม:

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

แล้วในมุมมอง:

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

นอกจากนี้หากคุณต้องการบัญชี navbar คงที่ (หรือ UI อื่น ๆ ) คุณสามารถตั้งค่าออฟเซ็ตสำหรับ $ anchorScroll เช่นนี้ (ในฟังก์ชั่นการทำงานของโมดูลหลัก):

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

นี่เป็นวิธีแก้ปัญหาของฉันโดยใช้คำสั่งซึ่งดูเหมือน Angular-y มากกว่าเพราะเรากำลังจัดการกับ DOM:

โปรดไปที่นี่

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();
    });

  };
});

HTML

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

ฉันใช้บริการ $ anchorScroll หากต้องการต่อต้านการรีเฟรชหน้าเว็บที่ไปพร้อมกับการเปลี่ยนแฮชฉันไปข้างหน้าและยกเลิกเหตุการณ์ locationChangeStart สิ่งนี้ใช้ได้ผลสำหรับฉันเพราะฉันมีหน้าความช่วยเหลือเชื่อมต่อกับสวิตช์ ng และการรีเฟรชจะทำให้แอปหยุดทำงาน

ลองตั้งค่าแฮนำหน้าสำหรับเส้นทางเชิงมุม $locationProvider.hashPrefix('!')

ตัวอย่างเต็มรูปแบบ:

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

ฉันได้สิ่งนี้ในตรรกะเส้นทางสำหรับแอปของฉัน

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;
      }
    });
}

นี่คือโพสต์เก่า แต่ฉันใช้เวลานานในการค้นคว้าวิธีแก้ปัญหาต่าง ๆ ดังนั้นฉันต้องการแบ่งปันอีกหนึ่งง่าย ๆ เพียงแค่เพิ่มtarget="_self"ไปยัง<a>แท็กแก้ไขสำหรับฉัน ลิงค์ใช้งานได้และพาฉันไปยังตำแหน่งที่เหมาะสมบนหน้าเว็บ

อย่างไรก็ตาม Angular ยังคงใส่ความแปลกประหลาดด้วย # ใน URL ดังนั้นคุณอาจพบปัญหาในการใช้ปุ่มย้อนกลับสำหรับการนำทางและหลังจากใช้วิธีนี้

นี่อาจเป็นแอททริบิวใหม่สำหรับ ngView แต่ฉันสามารถทำให้แอปยึดแฮชลิงก์ให้ทำงานangular-routeโดยใช้ngView autoscrollคุณลักษณะและ 'แฮชสองครั้ง' ได้

ngView (ดูการควบคุมอัตโนมัติ)

(รหัสต่อไปนี้ใช้กับสายรัดเชิงมุม)

<!-- 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>

ฉันสามารถทำเช่นนี้เพื่อ:

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

นี่คือวิธีแก้ไขปัญหาสกปรกโดยการสร้างคำสั่งกำหนดเองที่จะเลื่อนไปที่องค์ประกอบที่ระบุ (ด้วย hardcoded "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

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

หากคุณไม่ต้องการใช้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;
    };
}])

โซลูชันของฉันกับ ng-route เป็นคำสั่งง่ายๆนี้:

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

html นั้นดูเหมือน:

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

คุณอาจจะลองใช้anchorScroll

ตัวอย่าง

ดังนั้นตัวควบคุมจะเป็น:

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>

ฉันกำลังพยายามทำให้แอปพลิเคชัน Angular ของฉันเลื่อนไปที่แองเคอเรนโหลดและวิ่งเข้าสู่กฎการเขียน URL ใหม่ของ $ routeProvider

หลังจากการทดลองเป็นเวลานานฉันตัดสินในเรื่องนี้:

1. ลงทะเบียน document.onload ตัวจัดการเหตุการณ์จากส่วน. run () ของโมดูลแอป Angular
2. ในตัวจัดการค้นหาสิ่งที่มีแท็กจุดยึดเดิมที่ควรจะเป็นโดยการดำเนินการบางอย่างของสตริง
3. แทนที่ location.hash ด้วยแท็ก anchor stripped down (ซึ่งทำให้ $ routeProvider แทนที่ทับอีกครั้งทันทีด้วยกฎ "# /" แต่ก็ใช้ได้เนื่องจากการ Angular ซิงค์กับสิ่งที่เกิดขึ้นใน URL 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();
			}
		}	 
 });

ฉันไม่แน่ใจ 100% ว่าจะใช้งานได้ตลอดเวลาหรือไม่ แต่ในแอปพลิเคชันของฉันสิ่งนี้ทำให้ฉันมีพฤติกรรมที่คาดหวัง

ให้บอกว่าคุณอยู่ในหน้าเกี่ยวกับและคุณมีเส้นทางต่อไปนี้:

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

ตอนนี้ใน HTML ของคุณ

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

สรุปแล้ว

รวมถึงชื่อหน้าก่อนที่จะสมอทำเคล็ดลับสำหรับฉัน แจ้งให้เราทราบเกี่ยวกับความคิดของคุณ

ข้อเสีย

นี่จะแสดงหน้าซ้ำอีกครั้งแล้วเลื่อนไปที่จุดยึด

UPDATE

วิธีที่ดีกว่าคือการเพิ่มสิ่งต่อไปนี้:

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

รับคุณสมบัติการเลื่อนของคุณได้อย่างง่ายดาย นอกจากนี้ยังรองรับการเคลื่อนไหวแบบเคลื่อนไหว / การเลื่อนอย่างราบรื่นเป็นคุณสมบัติเพิ่มเติม รายละเอียดสำหรับไลบรารีAngular Scroll :

Github - https://github.com/oblador/angular-scroll

ซุ้มประตู :bower install --save angular-scroll

npm :npm install --save angular-scroll

รุ่น Minfied - เพียง 9kb

การเลื่อนอย่างราบรื่น (การเลื่อนแบบเคลื่อนไหว) - ใช่

เลื่อน Spy - ใช่

เอกสาร - ยอดเยี่ยม

การสาธิต - http://oblador.github.io/angular-scroll/

หวังว่านี่จะช่วยได้

จาก @Stoyan ฉันคิดวิธีแก้ปัญหาต่อไปนี้:

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();
        }
    }
});

เมื่อเปลี่ยนเส้นทางมันจะเลื่อนไปที่ด้านบนของหน้า

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

ใส่รหัสนี้ในตัวควบคุมของคุณ

ในใจของฉัน @slugslog มี แต่ฉันจะเปลี่ยนสิ่งหนึ่ง ฉันจะใช้แทนที่แทนดังนั้นคุณไม่จำเป็นต้องตั้งค่ากลับมา

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

การค้นหาเอกสารสำหรับ "วิธีการแทนที่"

วิธีการแก้ปัญหาข้างต้นไม่ได้ผลสำหรับฉัน แต่ฉันลองทำสิ่งนี้และใช้งานได้

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

ดังนั้นฉันรู้ว่าฉันต้องแจ้งให้หน้าเพื่อเริ่มต้นด้วยหน้าดัชนีแล้วใช้สมอดั้งเดิม

บางครั้งใน angularjs นำทางแอพลิเคชันแฮชไม่ได้ทำงานและบูต jQuery JavaScript ห้องสมุดทำให้การใช้งานที่กว้างขวางของประเภทของการนำทางนี้จะทำให้การทำงานเพิ่มtarget="_self"ไปยังแท็กสมอ เช่น<a data-toggle="tab" href="#id_of_div_to_navigate" target="_self">

ดูhttps://code.angularjs.org/1.4.10/docs/api/ngRoute/provider/ $ routeProvider

[reloadOnSearch = true] - {boolean =} - โหลดเส้นทางใหม่เมื่อมีการเปลี่ยนแปลงเพียง $ location.search () หรือ $ location.hash ()

การตั้งค่านี้เป็นเท็จได้หลอกลวงโดยไม่ต้องใช้ทั้งหมดข้างต้นสำหรับฉัน

ฉันใช้ AngularJS 1.3.15 และดูเหมือนว่าฉันไม่ต้องทำอะไรเป็นพิเศษ

https://code.angularjs.org/1.3.15/docs/api/ng/provider/ $ anchorScrollProvider

ดังนั้นสิ่งต่อไปนี้ใช้ได้กับฉันใน html ของฉัน:

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

ฉันไม่จำเป็นต้องทำการเปลี่ยนแปลงใด ๆ กับคอนโทรลเลอร์หรือ JavaScript เลย