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页面，但会自动滚动到编辑描述字段。

使用Angualar / ui-sref有一个简单的方法吗？

Answer 1

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

$location.hash('hashValue') 将使用id =＆＃34; hashValue＆＃34; url like : /profileSettings.html#hashValue
$anchorScroll 将滚动到该元素

所以你的代码可能如下所示：

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

注意：请务必在依赖项中添加$location和$anchorScroll。

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

1 个答案: