Question

我想重定向到另一个页面＆amp;重点应放在DIV的{{1}}上，其中id为'some-div-id'。我试过跟着

$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')

它正在创建一个正确的网址，但不向下滚动到DIV，其ID为some-div-id

EDITED

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＆amp; $location.url

Answer 1

尝试使用$location.url代替$location.path。

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

所以代码就像

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

其中pageone是州的网址，#one是ID

要在直接访问包含ID的网址时使其正常工作，请使用$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（用于查看网址检查http://run.plnkr.co/plunks/4kJjiMJImNzwLjRriiVR/#/pageone中的更改）

Answer 2

此行为是预期的。默认情况下，Angular不会在您的网址中允许第二个#，因此第一个#之外的每个%23都会被转义，从而导致#这是.config的转义字符：http://www.w3schools.com/tags/ref_urlencode.asp。

您可以尝试通过将以下内容添加到$locationProvider.html5Mode({ enabled: true });块来启用html5mode：

$anchorScroll()

如果这不能解决您的问题，或者您需要支持IE8支持，那么您最好的选择可能是使用id。

Here's the documentation

在您的应用中，您可以将要滚动的div $routeParams作为参数传递到您的网址中（使用$stateParams或ui-router＆＃39; s { {1}}），然后调用一个在页面加载时立即滚动到div的函数，例如：

$scope.scrollTo = function(id) {
   $location.hash(id);
   $anchorScroll();
}

另请阅读以下内容，详细说明如何使用$anchorScroll()解决您的具体问题：

How to handle anchor hash linking in AngularJS

即，这个特殊部分：

像往常一样设置角度路由，然后添加以下代码。

app.run(function($rootScope, $location, $anchorScroll, $routeParams) {
  //when the route is changed scroll to the proper element.
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    $location.hash($routeParams.scrollTo);
    $anchorScroll();  
  });
});

你的链接看起来像这样：

<a href="#/test?scrollTo=foo">Test/Foo</a>

Answer 3

$ location.path（页）;

只需添加$ location，即可在ur控制器中添加依赖项，此方法会在此路由上重定向您，而不会出现任何错误。

Answer 4

在ng-book中，有一些关于%13符号取代普通字母的内容。不幸的是，它涉及不同的主题 - 它是关于通过REST的$ http或xhr api调用，其中有两种模式（相同的将在这里） - 一种正常模式和第二种JQuery类似。事实证明，jquery将这些%13符号添加到arr[]=1之类的内容中。

我为什么这么说？因为解决方案之后会出现支持边际条件的库和函数。

你问题的情况很简单。有$ location服务，这是解决方案，urls是以两种模式创建simillary，这是hashbang而不是hashbang。

在jquery参数问题中，开发人员提供了用于将jquery参数交换为normal的库。现实生活中有许多转换器，如pdf to doc等。

请查看此book的简短章节。

据说在html5模式下，你不能在url中有两个哈希，但在hashbang模式下你可以。浏览器无法知道在hashbang模式下要使用哪个哈希。对此的支持是 anchorScroll 服务。

我还没有检查过这种情况是否有效，但尝试使用 AnchorScrollProvider 配置您的应用：

.config(function($anchorScrollProvider){
    $anchorScrollProvider.disableAutoScrolling();
});

然后在我写的时候，您可以将$anchorService服务注入您应用中的任何位置（特别是在绑定的控制器中以查看包含some-div-id div）并在此处调用此服务的anchorScroll()功能任何选择的时间。

我现在无法测试，所以这是理论上的答案。

Answer 5

之前我遇到过同样的问题而且this post帮助了我。我们希望它能够帮助你，如果它不让我知道，那么我可以帮你找到另一个解决方案。

祝你好运。

$ location.path将哈希值更改为％23＆amp; .hash工作不正常

5 个答案: