Angular uiRouter 和 ScrollIt

Question

我有一个使用 uiRouter 的 Angular 网络应用程序。该应用程序分为一个主视图，其中包含多个部分（关于、客户、功能、联系人等），然后是几个表单（在用户登录后），这些表单在他们自己的路径（注册、用户面板等）中加载.

在主视图上，我使用 ScrollIt 上下滚动特定部分。

我遇到的问题是，当我导航到注册页面，然后单击联系人（或主视图的任何其他 link）时，ScrollIt 不会滚动到该页面部分 - 可以理解。

它应该滚动到的部分不在 DOM 中。

请查看 ScrollIt 的工作原理： http://www.bytemuse.com/scrollIt.js/

开启者：

$.scrollIt({
    scrollTime: 1400,
    easing: 'easeInOutExpo',
    topOffset: -20,
});

并通过在导航和内容部分设置某些属性：

<ul class="collapse navbar-collapse navbar-ex1-collapse">
    <li><a data-scroll-nav="0" title="">Get Started</a></li>
    <li><a data-scroll-nav="1" title="">Features</a></li>
</ul>

...

<section data-scroll-index="0">
    ...
</section>

<section data-scroll-index="1">
    ....
</section>

如何通过 UI 路由器切换到主视图，然后在页面加载时触发 ScrollIt 导航到该部分？

谢谢！

Answer 1

我最终创建了一个指令来检查用户是否在滚动它的页面上...如果没有，路由到该页面并监听 $viewContentLoaded 事件。我在 ScrollIt 使用的每个导航项上添加了这个指令。然后代码等待几毫秒，然后触发元素上的点击事件...如果有人对如何改进它有建议，那就太好了。

指令代码，以防有人遇到此问题。

function link(scope, el, attrs) {
    el.bind('click', function(e) {
        if ($state.current.name !== 'home') {
            // If not on the Scroll it view...
            e.stopPropagation();

            // Switch to the Scroll it view...
            $rootScope.go('home');

            // Listen to the view content loaded event...
            var contentLoadEvent = $rootScope.$on('$viewContentLoaded', function() {
                // Remove the event listener....
                contentLoadEvent();

                // Wait 500 MS and trigger the click event on the same nav item...
                $timeout(function() {
                    el.trigger('click');
                }, 500);
            });
        }
    })
}

Angular uiRouter 和 ScrollIt

Angular uiRouter and ScrollIt

angularjs

angular-ui-router