Cách xử lý liên kết băm neo trong AngularJS

Có ai trong số các bạn biết cách xử lý liên kết băm neo trong AngularJS không?

Tôi có đánh dấu sau cho một trang Câu hỏi thường gặp đơn giản

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

Khi nhấp vào bất kỳ liên kết nào ở trên, AngularJS chặn và chuyển tôi đến một trang hoàn toàn khác (trong trường hợp của tôi, trang 404 vì không có tuyến nào khớp với các liên kết.)

Suy nghĩ đầu tiên của tôi là tạo ra một tuyến phù hợp " / faq /: chương " và trong bộ điều khiển tương ứng kiểm tra $routeParams.chaptersau một phần tử phù hợp và sau đó sử dụng jQuery để cuộn xuống nó.

Nhưng sau đó AngularJS lại tiếp tục tấn công tôi và chỉ cần cuộn lên đầu trang.

Vì vậy, có ai ở đây đã làm bất cứ điều gì tương tự trong quá khứ và biết một giải pháp tốt cho nó?

Chỉnh sửa: Chuyển sang html5Mode sẽ giải quyết vấn đề của tôi nhưng dù sao chúng tôi cũng phải hỗ trợ IE8 + vì vậy tôi sợ đó không phải là giải pháp được chấp nhận: /

Bạn đang tìm kiếm $anchorScroll().

Đây là tài liệu (crappy).

Và đây là nguồn.

Về cơ bản, bạn chỉ cần tiêm nó và gọi nó trong bộ điều khiển của bạn, và nó sẽ cuộn bạn đến bất kỳ phần tử nào có id được tìm thấy trong $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>

Đây là một plunker để chứng minh

EDIT: để sử dụng điều này với định tuyến

Thiết lập định tuyến góc của bạn như bình thường, sau đó chỉ cần thêm mã sau đây.

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

và liên kết của bạn sẽ trông như thế này:

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

Dưới đây là một Plunker thể hiện việc cuộn với định tuyến và $ anchorScroll

Và thậm chí đơn giản hơn:

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

và liên kết của bạn sẽ trông như thế này:

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

Trong trường hợp của tôi, tôi nhận thấy rằng logic định tuyến đã khởi động nếu tôi sửa đổi $location.hash(). Thủ thuật sau đây đã có hiệu quả ..

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

Không cần thay đổi bất kỳ định tuyến hoặc bất cứ điều gì khác chỉ cần sử dụng target="_self"khi tạo các liên kết

Thí dụ:

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

Và sử dụng idthuộc tính trong các phần tử html của bạn như thế này:

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

Không cần sử dụng ## như được chỉ / đề cập trong các bình luận ;-)

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

Nếu bạn luôn biết tuyến đường, bạn chỉ cần nối thêm neo như thế này:

href="#/route#anchorID

nơi routelà con đường góc hiện tại và anchorIDphù hợp với một <a id="anchorID">nơi nào đó trên trang

$anchorScroll hoạt động cho việc này, nhưng có một cách tốt hơn để sử dụng nó trong các phiên bản gần đây hơn của Angular.

Bây giờ, $anchorScrollchấp nhận hàm băm như một đối số tùy chọn, vì vậy bạn không phải thay đổi $location.hashgì cả. ( tài liệu )

Đây là giải pháp tốt nhất vì nó hoàn toàn không ảnh hưởng đến tuyến đường. Tôi không thể có bất kỳ giải pháp nào khác hoạt động vì tôi đang sử dụng ngRoute và tuyến đường sẽ tải lại ngay khi tôi đặt $location.hash(id), trước khi $anchorScrollcó thể thực hiện phép thuật của mình.

Đây là cách sử dụng nó ... đầu tiên, trong chỉ thị hoặc bộ điều khiển:

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

và sau đó trong chế độ xem:

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

Ngoài ra, nếu bạn cần tính đến một thanh điều hướng cố định (hoặc giao diện người dùng khác), bạn có thể đặt giá trị bù cho $ anchorScroll như thế này (trong chức năng chạy của mô-đun chính):

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

Đây là giải pháp của tôi bằng cách sử dụng một lệnh có vẻ Angular-y hơn vì chúng tôi đang xử lý DOM:

Plnkr ở đây

github

MÃ

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>

Tôi đã sử dụng dịch vụ $ anchorScroll. Để chống lại việc làm mới trang đi cùng với thay đổi băm, tôi đã tiếp tục và hủy sự kiện locationChangeStart. Điều này làm việc cho tôi vì tôi có một trang trợ giúp được nối với một ng-switch và việc làm mới sẽ thực sự phá vỡ ứng dụng.

Cố gắng đặt tiền tố băm cho các tuyến đường góc $locationProvider.hashPrefix('!')

Ví dụ đầy đủ:

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

Tôi đã khắc phục điều này trong logic lộ trình cho ứng dụng của mình.

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

Đây là một bài viết cũ, nhưng tôi đã dành một thời gian dài để nghiên cứu các giải pháp khác nhau vì vậy tôi muốn chia sẻ một giải pháp đơn giản hơn. Chỉ cần thêm target="_self"vào <a>thẻ đã cố định nó cho tôi. Liên kết hoạt động và đưa tôi đến vị trí thích hợp trên trang.

Tuy nhiên, Angular vẫn gây ra một số điều kỳ lạ với # trong URL để bạn có thể gặp rắc rối khi sử dụng nút quay lại để điều hướng và như vậy sau khi sử dụng phương pháp này.

Đây có thể là một thuộc tính mới cho ngView, nhưng tôi đã có thể làm cho nó liên kết băm neo hoạt động với việc angular-routesử dụng ngView autoscrollthuộc tính và 'băm kép'.

ngView (xem autoscroll)

(Đoạn mã sau được sử dụng với dây đeo góc)

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

Tôi có thể làm điều này như vậy:

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

Đây là cách giải quyết bẩn bằng cách tạo chỉ thị tùy chỉnh sẽ cuộn đến phần tử được chỉ định (với "faq" được mã hóa cứng)

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>

Nếu bạn không muốn sử dụng ng-clickđây là một giải pháp thay thế. Nó sử dụng một filterđể tạo url chính xác dựa trên trạng thái hiện tại. Ví dụ của tôi sử dụng ui.router .

Lợi ích là người dùng sẽ thấy nơi liên kết đi đến di chuột.

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

Bộ lọc:

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

Giải pháp của tôi với ng-route là chỉ thị đơn giản này:

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

Html trông giống như:

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

Bạn có thể thử sử dụng anchorScroll .

Thí dụ

Vì vậy, bộ điều khiển sẽ là:

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

Và quan điểm:

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

... và không có bí mật nào cho id neo:

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

Tôi đã cố gắng làm cho ứng dụng Angular của mình cuộn xuống một neo opon đang tải và chạy vào các quy tắc viết lại URL của $ routeProvider.

Sau thời gian dài thử nghiệm tôi đã giải quyết điều này:

1. đăng ký một trình xử lý sự kiện document.onload từ phần .run () của mô-đun ứng dụng Angular.
2. trong trình xử lý tìm ra cái gốc có thẻ neo được cho là bằng cách thực hiện một số thao tác chuỗi.
3. ghi đè lên vị trí $ neoScroll ().

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

Tôi không chắc chắn 100% nếu điều này hoạt động mọi lúc, nhưng trong ứng dụng của tôi, điều này mang lại cho tôi hành vi mong đợi.

Hãy nói rằng bạn đang ở trang GIỚI THIỆU và bạn có lộ trình sau:

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

Bây giờ, trong HTML của bạn

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

Tóm lại là

Bao gồm tên trang trước khi neo đã lừa tôi. Hãy cho tôi biết suy nghĩ của bạn.

Nhược điểm

Điều này sẽ kết xuất lại trang và sau đó cuộn đến neo.

CẬP NHẬT

Một cách tốt hơn là thêm vào như sau:

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

Nhận tính năng cuộn của bạn một cách dễ dàng. Nó cũng hỗ trợ cuộn Animated / Smooth như một tính năng bổ sung. Chi tiết cho thư viện Angular Scroll :

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

Cung cấp :bower install --save angular-scroll

NPM :npm install --save angular-scroll

Phiên bản Minfied - chỉ 9kb

Di chuyển mượt mà (cuộn hoạt hình) - có

Cuộn gián điệp - có

Tài liệu - xuất sắc

Bản trình diễn - http://oblador.github.io/angular-scroll/

Hi vọng điêu nay co ich.

Dựa trên @Stoyan tôi đã đưa ra giải pháp sau:

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

Trên Tuyến thay đổi, nó sẽ cuộn lên đầu trang.

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

đặt mã này trên bộ điều khiển của bạn.

Trong tâm trí của tôi @slugslog đã có nó, nhưng tôi sẽ thay đổi một điều. Tôi sẽ sử dụng thay thế để bạn không phải đặt lại.

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

Tìm kiếm tài liệu cho "Phương pháp thay thế"

Không có giải pháp nào ở trên phù hợp với tôi, nhưng tôi chỉ thử nó, và nó đã hoạt động,

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

Vì vậy, tôi nhận ra rằng tôi cần thông báo cho trang để bắt đầu với trang chỉ mục và sau đó sử dụng neo truyền thống.

Đôi khi trong điều hướng băm ứng dụng angularjs không hoạt động và các thư viện javascript bootstrap jquery sử dụng rộng rãi loại điều hướng này, để làm cho nó hoạt động thêm target="_self"vào thẻ neo. ví dụ<a data-toggle="tab" href="#id_of_div_to_navigate" target="_self">

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

[reloadOnSearch = true] - {boolean =} - tải lại tuyến đường khi chỉ thay đổi $ location.search () hoặc $ location.hash ().

Đặt điều này thành false đã thực hiện thủ thuật mà không có tất cả những điều trên đối với tôi.

Tôi đang sử dụng AngularJS 1.3.15 và có vẻ như tôi không phải làm gì đặc biệt.

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

Vì vậy, các công việc sau đây cho tôi trong html của tôi:

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

Tôi hoàn toàn không phải thực hiện bất kỳ thay đổi nào đối với bộ điều khiển hoặc JavaScript của mình.