التعامل مع التجزئة في AngularJS

لقد كان التنقل عبر صفحات الويب باستخدام المراسي ممارسة شائعة، خاصة بالنسبة للصفحات الطويلة ذات الأقسام المتعددة. ومع ذلك، في تطبيقات AngularJS، يمكن أن يكون التعامل مع رابط الارتساء مشكلة.

عند النقر على روابط الارتساء في AngularJS، فإن السلوك الافتراضي هو اعتراض النقرة وإعادة توجيه المستخدم إلى صفحة مختلفة. لمعالجة هذه المشكلة، توفر AngularJS حلاً.

$anchorScroll()

تم تصميم خدمة $anchorScroll() في AngularJS خصيصًا للتعامل مع ربط التجزئة. تسمح لك هذه الخدمة بالتمرير إلى عنصر في الصفحة الحالية بناءً على قيمة التجزئة في عنوان URL.

لاستخدام $anchorScroll()، ما عليك سوى إدخاله في وحدة التحكم الخاصة بك واستدعائه عند الضرورة. تأخذ الخدمة معلمة معرف اختيارية تحدد العنصر الذي سيتم التمرير إليه. إذا لم يتم توفير معرف، فسيتم التمرير إلى العنصر ذو المعرف المطابق $location.hash().

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

Test/Foo

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

Test/Foo