AngularUI路由器 - 滚动到状态变化的元素

我在StackOverflow上搜索了最近五个小时，没有任何相关的答案完全解决了我的问题。我有一个UI-Router状态，用于加载从自定义指令生成的一长串消息。这个页面在很多地方也被链接，指向不同的消息。我想滚动到当前选择的消息。AngularUI路由器 - 滚动到状态变化的元素

如果我用$超时环绕呼叫，我可以使用$ anchorScroll获得此功能。 $timeout(function(){$anchorScroll()};)但如果$超时不存在，那么对$ anchorScroll的调用就不会执行任何操作，因为View尚未完全加载。

这里是大部分的相关代码。

<message id='message{{message.id}}' 
    ng-repeat='message in messages' 
    message='message' 
    ng-class="{'current':current == 'message{{message.id}}'}" > 
</message>

在控制器I设定电流到$scope.current = $location.hash()。这一切都有效。

如果我直接加载页面，如#/messages#message100，页面将正确滚动。但是，如果从不同的看法我用的是一个链接，例如此：

<button ui-sref="message-state({'#':'message{{message.id}}'})> 
    Go To Message {{message.id}} 
</button>

页面将不会自动滚动到正确的锚，因为邮件列表中还没有尚未作出。但通过在$ timeout中将$ anchorScroll（）调用，我可以使页面滚动。

我不喜欢使用$超时为此目的。我知道我不应该在像这样的控制器中操纵DOM。

我曾尝试与众多$ stateProvider等事件的注册调用$ anchorScroll（）：

$state.$on('$viewContentLoaded', function(event) { 
    $anchorScroll(); 
});

但即使在当时的$ viewContentLoaded触发邮件列表不会在DOM存在并且页面不滚动。

IWhat是基于$ location.hash（）制作UI-Router滚动条的最佳方式。

来源

2015-10-10 fizzyh2o

即使我面临着类似的情况，经过几天的尝试和错误，我想出了这个。

在ui路由器中添加一个id参数到您想要启用滚动的状态。

$stateProvider.state('index', { 
    url: '/', 
    params: { 
     id: null 
    } 
})

然后在HTML中使用的用户界面，SREF

<li><a ui-sref="index({id: 'about-us'})" >About Us</a></li>

最后，app.run模块中检测使用

$rootScope.$on('$viewContentLoaded', function(event){ 
    if ($state.current.name == 'index') { 
     if($stateParams.id) { 
      $anchorScroll.yOffset = 150; 
      $location.hash($stateParams.id); 
      $timeout(function(){$anchorScroll()}, 1000); 
     } 
    } 
});

希望这有助于状态的变化。如果需要，会做一个plunkr。

来源

2016-01-26 08:01:48

AngularUI路由器 - 滚动到状态变化的元素

回答

相关问题