javascript - 单击链接后滚动到不同模板上的特定元素（Angularjs）

Question

嘿伙计们，我对 Angular 还是很陌生。

用户可以在 profileSettings 页面中编辑配置文件设置。

我的个人资料模板上有以下内容：

<div>{{ user.name }}</div>
<a class="pull-right" ui-sref="profileSettings"><strong>Edit Name</strong></a>
...more code...
<div>{{ user.description }}</div>
<a class="pull-right" ui-sref="profileSettings"><strong>Edit Description</strong></a>

我希望他们能够单击将他们带到 Settingsprofile 模板的编辑链接。但是，我希望在新模板呈现时自动滚动到相关字段。

因此，如果他们单击名称的编辑链接，他们将被带到 profileSettings 模板并自动滚动到编辑名称字段。如果他们单击编辑描述链接，那么他们也会被重定向到 profileSettings 页面，但会自动滚动到编辑描述字段。

有没有一种简单的方法可以使用 Angular/ui-sref 做到这一点？

Answer 1

使用在profileSettings状态变为活动状态 时将调用的可选onEnter回调来呈现这两个函数：

• $location.hash('hashValue') 将使用 id="hashValue" 的元素url like : /profileSettings.html#hashValue
• $anchorScroll 将滚动到该元素

因此，您的代码可能如下所示：

$stateProvider.state('profileSettings', {
  url: '/settings',
  template: 'settings.html',
  controller: 'ProfileSettingsCtrl',
  onEnter: function(){
      $location.hash('hashValue');
      $anchorScroll();
  }
});

注意：请记住添加$location和$anchorScroll到您的依赖项。