angularjs - $location.path 将哈希更改为 %23 & .hash 无法正常工作

Question

我想重定向到另一个页面，焦点应该放在 id 为“some-div-id”的某些 DIV 上。我尝试遵循

$location.path('/' + $scope.config_path.school + '/' +
        $routeParams.someUrl + '/#some-div-id')

这工作正常，但它首先将 # 更改为 %23喜欢

/%23some-div-id  #If '#' is not already present in the URL
/%23some-div-id#some-div-id #If '#' is laready present in the URL
/#some-div-id

我也尝试过以下

$location.path('/' + $scope.config_path.school + '/' +
        $routeParams.someUrl + '/').hash('some-div-id')

它正在创建一个正确的 URL，但不会向下滚动到 id 为 some-div-id 的 DIV

已编辑

app.run(function($rootScope, $location, $anchorScroll, $routeParams) {
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    setTimeout(function() {
      if ($location.hash()) {
        $anchorScroll($location.hash());
      }
    });
  });
})

app.controller('MainCntrl', function($scope, $location, $anchorScroll, $routeParams) {
});

我还尝试了$location.path & $location.url

Answer 1

尝试使用 $location.url 而不是 $location.path 。

根据文档，$location.path仅更改路径，而 $location.url更改路径、搜索和哈希。

所以代码就像这样

$scope.goto = function() {
    $location.url('pageone#one');
};

其中 pageone 是州的 URL，#one 是 ID

为了使其在直接访问包含 ID 的 URL 时正常工作，请使用 $anchorScroll 。在 $stateChangeSuccess 事件上，检查天气 $location.hash 是否存在。如果存在，则调用 $anchorScroll 。代码看起来像

.run(function($rootScope, $location, $anchorScroll,$timeout) {
    $rootScope.$on('$stateChangeSuccess',
        function(event, toState, toParams, fromState, fromParams) {
            $timeout(function() {
                if ($location.hash()) {
                $anchorScroll();
               }
          });
    });
})

示例 - http://plnkr.co/edit/4kJjiMJImNzwLjRriiVR?p=preview (要查看 URL 的更改，请检查 http://run.plnkr.co/plunks/4kJjiMJImNzwLjRriiVR/#/pageone )