滚动到不同的模板特定元素点击链接后（Angularjs） [英] Scrolling to specific element on different template after clicking link (Angularjs)

问题描述

嗨我是pretty新角度。

Hey guys I am pretty new to Angular.

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

Users can edit profile settings in profileSettings page.

我有我的配置文件模板以下内容：

I have the following on my profile template:

<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模板上。不过，我希望在新的模板使自动滚动到相关领域。

I want them to be able to click on the edit link that takes them to the Settingsprofile template. However I want when the new template renders to automatically scroll to the relevant field.

所以，如果他们点击名称编辑链接，他们被带到profileSettings模板和自动滚动编辑名称字段。如果他们点击编辑原文链接，那么它们也重定向到profileSettings页面，但自动滚动编辑描述字段。

So if they click edit link for name, they are taken to the profileSettings template and automatically scrolled to edit name field. If they click the edit description link then they are also redirected to profileSettings page but automatically scrolled to edit description field.

有一个简单的方式与Angualar / UI-SREF做到这一点？

Is there an easy way to do this with Angualar/ui-sref?

推荐答案

使用可选的的OnEnter
回调将被调用时的 profileSettings 状态被激活来呈现这两个功能：

Use the optional onEnter callback which will be called when profileSettings state becomes active to render those two functions :

• $的location.hash（散列值）
  将采取像ID =散列值的 URL元素：/profileSettings.html#hashValue 的


• $ anchorScroll
  将滚动到该元素

所以你的code可能是这样的：

So your code may look like this:

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

注意：记住添加 $位置和 $ anchorScroll 你的依赖。

Note: Remember to add $location and $anchorScrollto your dependencies.

这篇关于滚动到不同的模板特定元素点击链接后（Angularjs）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！