javascript - ngRoute 与动画滚动冲突

Question

我的 ng-route 与我在网页上实现的动画滚动冲突:

这是我的滚动元素:

<a href="#one" class="goto-next scrolly">Next</a>

其中“#one”是部分ID，其中滚动到goto-next是图像类，scrolly用于平滑滚动动画。

这是我的 ngRoute 配置:

angular.module('starter', ['ionic','ngRoute'])

.config(function($routeProvider) {
        $routeProvider

            // route for the home page
            .when('/home', {
                templateUrl : 'templates/home.html',
                controller  : 'mainController'
            })

            // route for the about page
            .when('/whatwedo', {
                templateUrl : 'templates/whatwedo.html',
                controller  : 'mainController'
            })

            // route for the contact page
            .when('/tryus', {
                templateUrl : 'templates/tryus.html',
                controller  : 'mainController'
            })

            .when('/pricing', {
                templateUrl : 'templates/pricing.html',
                controller  : 'mainController'
            })
            .when('/videos', {
                templateUrl : 'templates/videos.html',
                controller  : 'mainController'
            })
            .otherwise({
      redirectTo: '/home'
    });
})

每当我单击滚动元素时，n-groute 都会将其路由到默认网页，并且不会滚动，而是路由到默认网页。无法修复它。请帮忙。

编辑:使用 ui.router 而不是 ngRoute，但滚动动画(单击按钮时自动滚动)仍然不起作用。

Answer 1

Angular 中的内置路由器提供程序并不是很完美，它有很多像您遇到的问题，所以我不建议使用它。您可以查看ui-router，因为这将解决您遇到的问题，因为它实现了一个类似状态机来操作路由/链接，因此更加灵活和方便。

你遇到这种问题的原因是因为它在 url 中附加了 #one ，并且本质上 Angular-router 正在观察变化，它会自动处理新的 URl，这可能会说找不到该页面。

请参阅README并查看提供的示例。

希望这能解决您的问题。