如何使用Angularjs解析哈希后的URL参数？

Question

如何使用Angularjs解析哈希后的URL参数？

javascriptangularjsurlfoursquareangularjs-routing

22

我正在尝试从 Foursquare 的 URL 中解析 access_token，URL 的格式如下：

https://mywebsite.com/4sqredirect/#access_token=1234567890XXXXX

我已经尝试使用 $routeParams 和 $location，但没有返回任何内容。只有在我尝试使用 $route 后，我才得到一个带有以下属性的对象：

current:  { 
    params:  {  } 
    pathParams:  {  } 
    loadedTemplateUrl: partials/4sqredirect
    locals:  {  } 
    scope:  { 
        this:  { 
            $ref: $["current"]["scope"]
        } 
        route:  { 
            $ref: $
        } 
        location:  {  } 
        token: null
    }
}

这是否意味着无法使用原生AngularJS函数获取它，因为有#符号？

更新:

我的控制器如下所示：

angular.module('myApp')
    .controller('4sqredirectCtrl', function ($scope, $route, $location, $routeParams) {
        $scope.route = $route;
        $scope.location = $location;
        $scope.token = $routeParams.access_token;
    });

我的主 JavaScript 代码如下：

angular.module('myApp', [
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute'
])
.config(function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);

    $routeProvider
    .when('/', {
        templateUrl: 'partials/main',
        controller: 'MainCtrl'
    })
    .when('/4sqredirect/', {
        templateUrl: 'partials/4sqredirect',
        controller: '4sqredirectCtrl'
    })
    .otherwise({
        redirectTo: '/'
    });
});

- padawanlvn

4个回答

9

使用$location.search()

//e.g. url https://www.example.com/#!?name=123
var s = $location.search();
// {name: '123'}

http://docs.angularjs.org/api/ng.$location

搜索:

当没有任何参数调用时，返回当前URL的搜索部分（作为对象）。

- Umur Kontacı

4

没成功。$location.search 没有返回任何内容。可能是因为 URL 没有 '?'，所以它无法解析？ - padawanlvn

当然，如果它没有问号，那么它就不是一个搜索。请添加“？”。 - Umur Kontacı

2

很遗憾，我无法添加一个问号，因为那部分是预定义的并且返回给我的。 - padawanlvn

0

实际上，Angular JS 并没有直接支持这个功能。我不会使用ngRoute ，因为它可能已经期望了#在不同的位置。解决问题的简单方法是使用location.hash和substring()函数：

<!DOCTYPE html>
<html ng-app="app">

<head>
<script src="http://code.angularjs.org/1.2.6/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script>
angular.module('app', [])
.controller('AppCtrl', ['$scope', '$window', function($scope, $window) {
  $scope.accessToken = $window.location.hash.substring(14);
}]);
</script>
</head>

<body ng-controller="AppCtrl">
<h1>Access Token</h1>
<p>{{accessToken}}</p>
</body>

</html>

- Moritz Petersen

你和Reza有相似的想法，都起到了作用。我更喜欢Reza的想法，因为它使用了$location服务而不是$window服务。 - padawanlvn

0

我不知道是否有“本地的Angular”方法来实现它，但是您可以通过location.hash访问哈希作为字符串类型。这可能不是理想的方法，但是它可行。

- Stuart Nelson

位置也是空的，所以我甚至没有一个location.hash。 - padawanlvn

我不是100%确定，但location应该始终反映浏览器的当前位置。您想使用访问令牌做什么？它是由4sq返回还是由您返回？我原本以为它作为查询字符串参数出现。 - Stuart Nelson

这是由4sq返回的。https://developer.foursquare.com/overview/auth "如果用户接受，他们将被重定向回http://YOUR_REGISTERED_REDIRECT_URI/#access_token=ACCESS_TOKEN" - padawanlvn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tasnim Reza · Accepted Answer

从 AngularJS 地址服务中的 $location.hash() 方法返回值为 #after-hash。

因此，如果你的 URL 看起来像这样：

https://mywebsite.com/4sqredirect/#access_token=1234567890XXXXX

然后

$location.hash() 返回 access_token=1234567890XXXXX

你需要使用 split('=')[1] 进行分割

点击plunker中的4Square后，$location.url() 会返回

/4sqredirect/#access_token=123456
$location.hash().split('=')[1]

返回123456