Angularjs AngularUI路由器-状态更改时滚动到元素

我在StackOverflow上搜索了五个小时，没有一个相关的答案能完全解决我的问题。我有一个UI路由器状态，它加载从自定义指令生成的一长串消息。此页面链接的地方太多，指向不同的消息。我想滚动到当前选择的消息

我可以使用$anchorScroll来实现这一点，如果我在通话中加上$timeout<代码>$timeout（function（）{$anchorScroll（）}；）但如果$timeout不存在，则调用$anchorScroll不会执行任何操作，因为视图尚未完全加载

下面是大部分相关代码

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

由于尚未创建消息列表，页面将不会自动滚动到正确的定位点。但是通过在$timeout中调用$anchorScroll（），我可以使页面滚动

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

我已尝试在许多$stateProvider事件中注册对$anchorScroll（）的调用，例如：

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

但即使在$viewContentLoaded启动时，消息列表也不存在于DOM中，页面也不会滚动

---

我知道什么是让UI路由器基于$location.hash（）滚动的最好方法。

即使我也面临类似的情况，经过几天的尝试和错误，我还是想出了这个方法

在ui路由器中，将id参数添加到要启用滚动的状态

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

然后在html中使用ui sref

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

希望这有帮助。如果需要的话，我会做一次撞击

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

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