Question

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

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

我遇到的问题是，当我导航到例如注册页面然后点击联系人（或主视图的任何其他链接）时，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使用的每个导航项上添加了此指令。然后代码等待几毫秒然后触发元素上的click事件......如果有人有关于如何改进这个的建议，那就太棒了。

指令代码以防任何人遇到此问题。

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 ui Router和ScrollIt

1 个答案: