javascript - AngularJS:自定义 $anchorScroll 提供程序执行

Question

我需要在页面重新加载时滚动到特定的 anchor 标记。我尝试使用 $anchorScroll，但它计算 $location.hash()，这不是我需要的。

我根据$anchorScrollProvider的源码写了一个自定义的provider。在其中，它向 rootScope 的 $watch 列表添加一个值，并在更改时调用 $evalAsync。

提供商:

zlc.provider('scroll', function() {
  this.$get = ['$window', '$rootScope', function($window, $rootScope) {
    var document = $window.document;
    var elm;

    function scroll() {
      elm = document.getElementById($rootScope.trendHistory.id);
      if (elm) elm.scrollIntoView();  
    }

    $rootScope.$watch(function scrollWatch() {return $rootScope.trendHistory.id;},
      function scrollWatchAction() {
        if ($rootScope.trendHistory.id) $rootScope.$eval(scroll);
      });

    return scroll;
  }];
});

现在，当我尝试在我的 Controller 中调用滚动提供程序时，我必须在调用 scroll() 之前强制使用 $scope.$apply() 进行摘要:

Controller :

//inside function called on reload
$scope.apply();
scroll();

为什么我必须调用 $scope.$apply()？为什么滚动函数在当前范围内调用时不在 Angular 上下文中求值？感谢您的帮助!

Answer 1

我不确定您使用 $rootScope.$eval(scroll) 的想法是什么 - 因为 scroll() 函数已经在以下上下文中执行它可以直接访问 $rootScope。

如果我理解正确，您希望能够滚动到由存储在 $rootScope.trendHistory.id 中的 id 表示的特定元素。

当该 id 更改时，您想滚动到该元素(如果它存在于页面上)。

假设这是对您要实现的目标的正确解释，下面是我可能会如何实现它:

app.service('scrollService', function($rootScope) {
  $rootScope.trendHistory = {};

  $rootScope.$watch('trendHistory.id', function(val) {
    if (val) {
      elm = document.getElementById($rootScope.trendHistory.id);
      if (elm) elm.scrollIntoView();
    }
  });

  this.scrollTo = function(linkId) {
    $rootScope.trendHistory.id = linkId;
  }
});

这是一项服务(类似于您的提供商，但使用更简单的“服务”方法)，它将在 $rootScope 上设置一个 $watch，寻找对 $rootScope.trendHistory.id 的更改.当检测到更改时，它会滚动到指示的元素(如果它存在)——该位直接从您的代码中获取。

因此，要在 Controller 中使用它，您需要注入(inject) scrollService，然后使用 ID 作为参数调用其 scrollTo() 方法。示例:

app.controller('AppController', function($scope, scrollService) {

        scrollService.scrollTo('some_id');

});

在您的问题中，您提到这需要在重新加载时发生，因此您只需将调用放入您的重新加载处理程序中。您也可以直接从应用中的任何位置修改 $rootScope.trendHistory.id 的值，它也会尝试滚动。

这是一个说明基本方法的演示:http://plnkr.co/edit/cJpHoSemj2Z9muCQVKmj?p=preview

希望对您有所帮助，如果我误解了您的要求，我们深表歉意。