$location.path将哈希更改为#

Question

我想重定向到另一个页面

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

这工作正常，但它首先会变为

/%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为某个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

Answer 1

$location。路径（第页）；

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

Answer 2

这种行为是意料之中的。默认情况下，Angular不允许在url中出现第二个，因此第一个之外的每个都将被转义，从而导致的转义字符：http://www.w3schools.com/tags/ref_urlencode.asp.

您可以尝试通过将以下内容添加到您的. config块来启用html5Mode：

$locationProvider.html5Mode({
    enabled: true
});

如果这不能解决您的问题，或者如果您需要支持IE8，那么您最好使用$anchorScroll（）。

这是文件。

在应用程序中，您可以将要滚动到的div的id作为url中的参数传递（使用$routeParams或ui路由器的$stateParams），然后调用一个函数，在页面加载时立即滚动到该div，例如：

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

有关如何使用$anchorScroll（）解决特定问题的更详细说明，请阅读以下内容：

如何处理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.url而不是$location.path。

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

所以代码就像

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

其中pageone是状态的URL，#one是ID

另外，要使它在直接访问带有ID的URL时工作，请使用$anchorScroll。在$stateChange成功事件中，检查天气$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的变化）