AngularJS:状态更改后自动滚动到 anchor

Question

我希望让用户单击页面上的链接，这将触发 stateChange 并引导他们进入新状态。我想要实现的是，当状态完成加载时，它会滚动到上一页链接指定的页面上的 anchor 。

为此，我使用了通过 ui-sref 传递 $stateParam 的组合，如下所示:

<a ui-sref="stateParent.stateChild({id: 'practiceParam'})">goToPage</a>

然后，当到达页面时，上面有一个 div，附加了一个在 $viewContentLoaded 上激活的指令，因此 DOM 被呈现，我可以搜索 ID。 HTML div 看起来像这样:

<div scroll-after-load ></div>

我的滚动指令如下:

angular.module( 'app' ).directive('scrollAfterLoad', function() {
  return {
    restrict: 'A',
    link: function(scope, $elm, attrs, $stateParams) {
        scope.$on('$viewContentLoaded', function() {
            console.log('scrollAfterLoad Directive Loaded, $stateParams are: ', $stateParams );
            var idToScroll = attrs.href;
            var $target;
            if (idToScroll) {
                $target = $(idToScroll);
                // the -50 accounts for the top navbar which is fixed on the page and removed from pageflow
                $("html,body").animate({scrollTop: $target.offset().top - 50}, "slow");
            }
        });
    }
  };
});

我还没有费心在 div 上设置 href，因为我无法访问传递的参数，我是不是访问不正确？我也尝试过使用更标准的 state.go() 来传递 stateParam 但我的结果仍然为空。

一旦我可以传递一个状态参数，我的想法就是向注入(inject)到新加载页面上的 div 中的参数添加一个 href，并自动滚动到该页面上具有与我传递的参数匹配的 ID 的另一个 div。

另请注意，在我的 ui-view 上，我将自动滚动设置为 true，因此页面会自动加载到顶部，我喜欢这种行为，这也是我需要状态在 scoll 被激活之前完成加载的原因。

Answer 1

您的问题是您试图将 $stateParams 服务注入(inject)到链接函数中。但是，这种注入(inject)的正确位置是工厂方法，即指令的定义。工厂方法已在模块中注册 - 就像您使用 scrollAfterLoad 指令一样。有关更多信息，请查看 AngularJS Dependency Injection .

回到您的问题:如果您实际将 $stateParams 注入(inject)到指令的工厂方法中，意味着在顶部您将能够轻松访问参数。您的指令可能如下所示:

angular.module( 'app' ).directive('scrollAfterLoad', ['$stateParams', function($stateParams) {
  return {
    restrict: 'A',
    link: function(scope, $elm, attrs) {
        scope.$on('$viewContentLoaded', function() {
            console.log('scrollAfterLoad Directive Loaded, $stateParams are: ', $stateParams );
            var idToScroll = attrs.href;
            var $target;
            if (idToScroll) {
                $target = $(idToScroll);
                // the -50 accounts for the top navbar which is fixed on the page and removed from pageflow
                $("html,body").animate({scrollTop: $target.offset().top - 50}, "slow");
            }
        });
    }
  };
}]);

请注意，我已从您的链接函数中删除了 $stateParams 并将其放在顶部。这样，服务将在链接函数中可用 - 实际上在整个指令中。

我在这个 Plunker 中重现了你的场景.