Question

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

这是我的滚动元素：

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

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

这是我的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，因为这将解决您的问题，因为它实现了一个类似状态的机器来操作路由/链接，它更加灵活和方便。

你遇到这种问题的原因是因为它在网址中追加#one并且本质上Angular-router正在观察更改并且它将自动处理新的URl，这可能会说该页面是没找到。

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

希望这可以解决您的问题。

ngRoute与动画滚动冲突

1 个答案: