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路由器 - 滾動到狀態變化的元素

回答

相關問題