Question

我有一个简单的视图，表示应该使用anchor行为的简单菜单。在同一页面上有一堆H2个标签id，链接应滚动到这些标签。

我正在使用$anchorScroll和$location。

问题：我第一次点击链接时，可以看到路线已更新，例如：

http://localhost:60002/#!/docs/view/somedoc#someResourceId

但是它会触发一条路线，第二次我点击它，它的行为符合预期。

更新：使用anchorScroll()相同的行为并非element.scrollIntoView(true)手动执行此操作。如果我不使用$location.hash它可以工作，但我失去了链接到锚点的可能性。

有什么想法吗？

查看：

<div ng-controller="DocsMenuCtrl">
    <ul ng-repeat="menuItem in menuItems">
        <li><a ng-click="foo(menuItem.resourceId)">{{menuItem.title}}</a></li>
    </ul>
</div>
...
...
<h2 id="...">Test</h2>
...

控制器：

module.controller('DocsMenuCtrl', ['$scope', '$http', '$location', '$anchorScroll', 'session', function ($scope, $http, $location, $anchorScroll, session) {
    $scope.foo = function (resourceId) {
        $location.hash(resourceId);

        $anchorScroll();
    };

    $http.get('/api/menu/').success(function (d) {
        $scope.menuItems = d;
    }).error(function () {
        session.logger.log(arguments);
    });
}]);

ROUTEPROVIDER CONFIG等

$locationProvider.hashPrefix('!');

$routeProvider
    .when('/default', {
        templateUrl: 'clientviews/default',
        controller: 'DefaultCtrl'
    })
    .when('/docs/view/:id', {
        templateUrl: 'clientviews/docs',
        controller: 'DocsCtrl'
    })
    .otherwise({
        redirectTo: '/default'
    });

Answer 1

$location即使用于更改网址，也不会重新加载页面。请参阅“它不做什么？”本页的一部分：$location ngDoc。

Answer 2

正如Ganonside所说，位置服务不会重新加载网址。一旦确定网址更改，您就可以使用路由服务，特别是$ route.reload（）来触发路由。

Answer 3

我找到的最佳解决方案是：https://github.com/angular/angular.js/issues/1699#issuecomment-22509845

如果你不使用搜索参数，另一种选择是告诉路由提供者不要重新加载哈希值或搜索更改（不幸的是，这两者都是一个选项）。

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/group/:groupName', {
        templateUrl: '/templates/groupView.html',
        reloadOnSearch: false
    }).otherwise({redirectTo: '/'});
}]);

具有路线和锚标签的AngularJs，在第二次点击时工作

3 个答案: