Angular - 使用 $location 获取 GET 变量答案

【问题标题】：Angular - getting GET variable using $locationAngular - 使用 $location 获取 GET 变量
【发布时间】：2017-03-29 11:46:33
【问题描述】：

我正在尝试使用 Angular $location.search() 从 url 获取一个 GET var，但它不起作用。

这是代码：

jsfiddle

and this is the GET

var app = angular.module('myApp',[]);

app.controller('odinvite', function ($scope, $location)
    {
        //$scope.mytry = 5;
        $scope.mytry =$location.search().username;
    }
);

有什么问题？除此之外还有其他办法吗？

谢谢！

编辑 -
我尝试像这样手动向 url 添加哈希 - “mydomain.com/foo.php#?username=7”，它成功了！但我不会每次都添加哈希，我希望$location 自动抓取它。

我也尝试添加这个 -

 app.config(['$locationProvider', function($locationProvider) {
        $locationProvider.html5Mode(true);
    }]);

解决它，但它给了我一个错误 -

Error: [$location:nobase] http://errors.angularjs.org/1.4.8/$location/nobase
    at angular.js:38
    at hf.$get (angular.js:12196)
    at Object.e [as invoke] (angular.js:4523)
    at angular.js:4340
    at d (angular.js:4482)
    at Object.e [as invoke] (angular.js:4514)
    at M.instance (angular.js:9182)
    at D (angular.js:8299)
    at g (angular.js:7731)
    at angular.js:7611
(anonymous) @ angular.js:12520
(anonymous) @ angular.js:9292
$apply @ angular.js:16157
(anonymous) @ angular.js:1679
e @ angular.js:4523
c @ angular.js:1677
yc @ angular.js:1697
Zd @ angular.js:1591
(anonymous) @ angular.js:29013
b @ angular.js:3057
If @ angular.js:3346
d @ angular.js:3334

【问题讨论】：

标签： javascript angularjs url get

【解决方案1】：

您的示例正在使用第二个链接。它不适用于第一个链接，因为小提琴链接https://jsfiddle.net/bar2o6gf/3/ 不包含username

所以，我使用$location 的'url' 属性模拟了url

$location.url('http://fiddle.jshell.net/bar2o6gf/3/show/light/?username=7');

这是代码，

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <head>
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="myApp" ng-controller="odinvite">
      <div>
        <br />
        <br />

      $location.url() = {{location.url()}}<br />
      $location.search() = {{loc1}}<br />
      keyword valus is  {{mytry}}
  </div>
  {{mytry}}
    </div>
  
<script>
var app = angular.module('myApp',[]);

app.controller('odinvite', function ($scope, $location)
    {
        //$scope.mytry = 5;
        
        $scope.location = $location;
      $location.url('http://fiddle.jshell.net/bar2o6gf/3/show/light/?username=7');
  $scope.loc1 = $location.search() ;    
    if($location.url().indexOf('username') > -1){    
        $scope.mytry= $location.search().username ;    
               
    }
  
    }
);

</script>

</body>
</html>

Here is a DEMO

【讨论】：

我之前在我的 WAMP 服务器上尝试过，但没有成功。
codeshare.io/2BdlQL - 这是现在的代码...我缩小它以便更好地调试
只需console.log($location.search()) 并检查你得到了什么。还要检查这个plnkr.co/edit/Aa2XRXvEjIUerW6lyhun?p=preview
打印“对象{}”
顺便说一句 - 我刚刚在某处读到了有关哈希的信息 - 当我这样做时 - localhost/odinvite.php#?username=7 - 它有效！

【解决方案2】：

这是 JS Fiddle 和查询字符串属性与 iFrame 一起使用的问题。见这里：How to pass GET parameters to jsFiddle

【讨论】：

我在我的 WAMP 服务器上试过了。它在那里也不起作用