Question

我是angular的新手，我已经开始使用angular1 ui-route。当我从一个视图（view1）移到另一个（view2）时，视图2加载正常，但是当我向下滚动时发现，视图1出现在视图2下方。仅在通过ui-route导航时才观察到此问题。在页面刷新/刷新上，我发现它工作正常。无法找出原因。

库版本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>  
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>

从仪表板切换到用户视图时，用户视图将在其下方带有仪表板视图的情况下进行加载。应用程序中除了body标签之外，没有ui视图。其他页面只是模板/常见的html页面。

HTML :
<body ng-app="NoticeboardApp" ng-cloak>
  <div ui-view></div>
</body>


Route :
<a ui-sref="users"></a>
<a ui-sref="notifications"></a>

app.js :
.state('dashboard', {
        url: '/dashboard',
        templateUrl: 'pages/dashboard.html',
        controller: 'dashboardCtrl'
    })
    .state('users', {
        url: '/users',
        templateUrl: 'pages/user.html',
        controller: 'userCtrl'
    })
    .state('notifications', {
        url: '/notifications',
        templateUrl: 'pages/notification.html',
        controller: 'notificationCtrl'
    })



After routing, inspect element code shows two ui-view :
[inspect elements code][1]


  [1]: https://i.stack.imgur.com/Wa1hW.png

Answer 1

如果我没有记错的话，ui-router中存在一个错误，可以通过在加载新页面时滚动到顶部来解决。

$scope.$on('$stateChangeSuccess', function () {
    window.scrollTo(0, 0);
});

如何修复UI-route，其中路由将加载先前视图以及当前视图下方

1 个答案: