如果 URL 包含参数 x，我如何在 AngularJS 中设置计时器以滚动到元素 ID？

Question

如果 URL 包含参数，我如何为 AngularJS 设置计时器以滚动到 ID？顺便说一下，URL 是外部的，因此它不是来自我的网站。

这是我的问题：

1. 用户点击 url 作为 www.mySite.com/#/index#today 来自 Outlook（强调它来自外部 link 因此我无法放置 href 等或编辑 <a> 标签，因为没有 html/it 是外部的。

2. 当他们点击 外观时 link 它会转到 www.mySite.com/#/index并删除#today。因此不会向下滚动到#today 所在的位置。

3. 当他们返回 outlook 并再次单击 link 时，#today 起作用并且没有被删除。它还将向下滚动到它所在的位置。必须访问该站点才能正常工作。

我在网上搜索了一下，他们仍然没有针对外部 link 的任何解决方案，我看到的是针对现场解决方案的，他们在其中编辑了 <a> 标签。

我已经在下面尝试过这些，但是 none 成功了：

太阳 1

*other routeProviders here*
...
$routeProvider.when('/index', {
        templateUrl: 'app/views/index.htm'
    });

$routeProvider.otherwise({ redirectTo: '/index#today' });

但是#只变成了%23或者被删除了

太阳 2

我也试过这个 scrollTo:

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

并将 outlook 中的 link 更改为 www.mySite.com/#/index?scrollTo=today 但忘记了 scrollTo 是一个属性，因此它应该放在 <a>标签，我说得对吗？但是我们使用的是外部 link，因此我们无法在 Outlook 中编辑任何内容，除了它们的添加 link 功能。

太阳 3

最后我也试过了：

...
$routeProvider.when('/index', {
        controller: 'myCtrl',
        templateUrl: 'app/views/index.htm'
    });
...

app.run(function ($rootScope, $location, $anchorScroll, $timeout) {
    $rootScope.$on("$routeChangeSuccess", function (event, next, current) {
        if ($location.hash()) {
            $timeout(function () { $anchorScroll() }, 5);
        } else {
            window.scrollTo(0, 0);
        }
    });
});

app.controller('myCtrl', ['$scope', '$location', '$anchorScroll',
    function ($scope, $location, $anchorScroll) {
        $scope.gotoBottom = function () {
            $location.hash('today');
            $anchorScroll();
        };
    }]);

但是没有用。（还是一样，还是需要双击）

成为 Sol'n 4

所以我想也许我可以：

在outlook中手动放置一个参数link: example: www.mySite.com/#/index?scrollMe=today
检索手动输入 url 框或手动输入 outlook 电子邮件 url 的参数。
然后可以添加一个计时器，例如 2 秒或 1 秒，以滚动到页面加载后今天的参数 ID。

计时器的目的可能是因为页面尚未加载并且已经在滚动，所以自动滚动将无法工作？可能不是，但我想确定计时器部分，所以我至少要等一秒钟再滚动。我认为一秒钟不会伤害任何人。我也可以将它降低到毫秒，但计时器仅用于测试。

我是新手AngularJS，很想请教各位前辈和高手，有没有办法解决这个问题。 :(

干杯！

Answer 1

你可以使用$routeParams所以它会是这样的-

$routeProvider.when('/index/:when', {
   controller: 'myCtrl',
   templateUrl: 'app/views/index.html'
});

app.controller('myCtrl', ['$scope', '$routeParams', '$location', '$anchorScroll'
    function ($scope, $routeParams, $location, $anchorScroll) {
        var goToId = $routeParams.when;
        $location.hash(goToId);
        $anchorScroll();
    }]);

我的index.html有这个

<div id="today" style="margin-top: 2000px;">
  This div shows today's contents
</div>

最后 url 应该是这样 /#/index/today 或 /#/index/yesterday

AngularJS 参考文档 - https://docs.angularjs.org/tutorial/step_09

如果 URL 包含参数 x，我如何在 AngularJS 中设置计时器以滚动到元素 ID？

How do I set a timer in AngularJS to scroll to an element ID if URL contains parameter of x?

angularjs

timer

anchor

route-provider

anchor-scroll