Question

HTML源代码

<div ng-app="">
    <div ng-controller="test">
      <div ng-address-bar browser="html5"></div>
      <br><br>
      $location.url() = {{$location.url()}}<br>
      $location.search() = {{$location.search('keyword')}}<br>
      $location.hash() = {{$location.hash()}}<br>     
      keyword valus is={{loc}} and ={{loc1}}
  </div>
</div>

AngularJS源代码

<script>
function test($scope, $location) {
  $scope.$location = $location;
  $scope.ur = $scope.$location.url('www.html.com/x.html?keyword=test#/x/u');
  $scope.loc1 = $scope.$location.search().keyword ;    
    if($location.url().indexOf('keyword') > -1){    
        $scope.loc= $location.url().split('=')[1];
        $scope.loc = $scope.loc.split("#")[0]        
    }
  }
 </script>

此处变量loc和loc1都返回 test 作为上述网址的结果。这是正确的方法吗？

Answer 1

我知道这是一个老问题，但考虑到稀疏的Angular文档，我花了一些时间来解决这个问题。 RouteProvider 和 routeParams 是可行的方法。路由将URL连接到Controller / View，并且routeParams可以传递到控制器。

查看Angular seed项目。在app.js中，您将找到路由提供程序的示例。要使用params，只需将它们添加为：

$routeProvider.when('/view1/:param1/:param2', {
    templateUrl: 'partials/partial1.html',    
    controller: 'MyCtrl1'
});

然后在你的控制器中注入$ routeParams：

.controller('MyCtrl1', ['$scope','$routeParams', function($scope, $routeParams) {
  var param1 = $routeParams.param1;
  var param2 = $routeParams.param2;
  ...
}]);

Answer 2

虽然路由确实是应用程序级URL解析的一个很好的解决方案，但您可能希望使用更低级别的$location服务，如在您自己的服务或控制器中注入的那样：

var paramValue = $location.search().myParam;

这个简单的语法适用于http://example.com/path?myParam=paramValue。但是，仅当您在HTML 5模式中配置$locationProvider之前：

$locationProvider.html5Mode(true);

否则看看http://example.com/#!/path?myParam=someValue“Hashbang”语法有点复杂，但也有利于处理旧浏览器（非HTML 5兼容）。

Answer 3

如果您正在使用ngRoute，则可以将$routeParams注入控制器

http://docs.angularjs.org/api/ngRoute/service/$routeParams

如果您使用的是angular-ui-router，则可以注入$stateParams

https://github.com/angular-ui/ui-router/wiki/URL-Routing

Answer 4

我找到了解决方案如何使用$ location.search（）从URL

获取参数

首先在URL中你需要把语法＆＃34; ＃＆＃34;在像这个例子的参数之前

"http://www.example.com/page#?key=value"

然后在你的控制器中你把$ location放在函数中并使用$ location.search（）来获取

的URL参数

.controller('yourController', ['$scope', function($scope, $location) {

     var param1 = $location.search().param1; //Get parameter from URL

}]);

Answer 5

如果已发布的答案没有帮助，可以试试 $ location.search（）myParam。网址为http://example.domain#?myParam=paramValue

Answer 6

sudo pkill rls cargo

Answer 7

获取网址值的简便方法

First add # to url (e:g -  test.html#key=value)

url in browser (https://stackover.....king-angularjs-1-5#?brand=stackoverflow)

var url = window.location.href 

(output: url = "https://stackover.....king-angularjs-1-5#?brand=stackoverflow")

url.split('=').pop()
output "stackoverflow"

Answer 8

与express一起使用angularjs时

在我的示例中，我使用了angularjs进行快速路由，因此使用$ routeParams会弄乱我的路由。我使用以下代码来获得期望的结果：

const getParameters = (temp, path) => {
  const parameters = {};
  const tempParts = temp.split('/');
  const pathParts = path.split('/');
  for (let i = 0; i < tempParts.length; i++) {
    const element = tempParts[i];
    if(element.startsWith(':')) {
      const key = element.substring(1,element.length);
      parameters[key] = pathParts[i];
    }
  }
  return parameters;
};

这将接收URL模板和给定位置的路径。我只是用它来称呼它：

const params = getParameters('/:table/:id/visit/:place_id/on/:interval/something', $location.path());

将所有控制器放在一起：

.controller('TestController', ['$scope', function($scope, $window) {
  const getParameters = (temp, path) => {
    const parameters = {};
    const tempParts = temp.split('/');
    const pathParts = path.split('/');
    for (let i = 0; i < tempParts.length; i++) {
      const element = tempParts[i];
      if(element.startsWith(':')) {
        const key = element.substring(1,element.length);
        parameters[key] = pathParts[i];
      }
    }
    return parameters;
  };

const params = getParameters('/:table/:id/visit/:place_id/on/:interval/something', $window.location.pathname);
}]);

结果将是：

{ table: "users", id: "1", place_id: "43", interval: "week" }

希望这可以帮助某个人！

如何使用AngularJS获取url参数

8 个答案: