如何使 templateURL 滚动到页面的某些部分？

Question

你们能帮我处理一下我的 routeProvider 吗？

$routeProvider.when('/farm', {
        templateUrl: '/index.htm#farm'
    });

#farm 不起作用。我想要这样当有人从 Outlook 中单击 Farm 链接时，它会转到索引页面并向下滚动到 ID 为 farm 的位置。我的 div 也已经有一个农场 ID，所以我猜这没问题。

我已经阅读了很多资源和解决方案，但他们都说锚标签在 templateURL 上不起作用。我想知道你们是否有办法解决这个问题。

顺便说一下，示例链接是：www.test.com/index#farm 在 Outlook 电子邮件中单击该链接不会向下滚动到 #farm 所在的位置。 相反，它会转到索引页面并将 URL 仅转换为 /index 而没有 #farm

这是我的代码的另一部分，以防这些人弄乱它：

$locationProvider.hashPrefix('');

    $routeProvider.when('/index', {
        templateUrl: '/index.htm'
    });
    $routeProvider.when('/farm', {
        templateUrl: '/index.htm#farm'
    });
    $routeProvider.when('/error', {
        templateUrl: '/error.htm'
    });
    $routeProvider.otherwise({ redirectTo: '/index' });

我认为.otherwise 正在使它进入index.htm。 有没有其他方法可以添加另一个 routeProvider 和 templateURL 可以向下滚动到农场在索引页面中的位置？

当我尝试templateURL: '/index.html#farm' 时，它只转到/index%23farm，它不会向下滚动。

所以基本上链接是外部的（来自电子邮件），如果他们点击它，我希望他们向下滚动到 #farm 所在的位置。

Answer 1

使用 $anchorScroll();

将 $anchorScroll 注入到您的控制器中并照此使用。

https://docs.angularjs.org/api/ng/service/$anchorScroll

 // the element you wish to scroll to.
  $location.hash('farm’);

  // call $anchorScroll()
  $anchorScroll();