使用$routeProvider与
和

26 浏览
0 Comments

使用$routeProvider与和

我想使用AngularJS读取URL查询参数的值。我使用以下URL访问HTML：\nhttp://127.0.0.1:8080/test.html?target=bob\n如预期，location.search是\"?target=bob\"。\n为了访问target的值，我在网上找到了各种示例，但在AngularJS 1.0.0rc10中，它们都不起作用。具体来说，以下都是undefined：\n

    \n

  • $location.search.target

    • \n

  • $location.search[\'target\']

    • \n

  • $location.search()[\'target\']

    • \n

\n有人知道什么方法有效吗？（我在我的控制器中将$location作为参数使用）\n更新：\n我在下面发布了一个解决方案，但我对它并不完全满意。\n在开发者指南：Angular服务：使用$location中关于$location的文档中，有以下内容：\n

\n我何时应该使用$location？\n每当您的应用程序需要对当前URL的更改作出反应，或者如果您想在浏览器中更改当前URL时。\n

\n对于我的场景，我的页面将从外部网页打开，并具有查询参数，所以我不是\"对当前URL的更改作出反应\"。所以也许$location不是这项工作的正确工具（有关详细信息，请参见下面我的答案）。因此，我将此问题的标题从\"如何使用$location在AngularJS中读取查询参数？\"更改为\"在AngularJS中读取查询参数的最简洁方法是什么？\"。显然，我可以使用JavaScript和正则表达式来解析location.search，但是对于如此基本的事情，这样低级别的操作真的冒犯了我的程序员意识。\n那么：是否有比我在答案中使用的$location更好的方法，或者是否有更简洁的替代方法？

0

3 答案

0 Comments

问题的原因是在使用$routeProvider时，通过

和无法正确获取查询参数。解决方法是使用$locationProvider.html5Mode(true)，或者在旧的浏览器中使用带有hash+slash的地址。

在上述代码中，调用$locationProvider.html5Mode(true)是关键。现在，当打开http://127.0.0.1:8080/test.html?target=bob时，它可以正常工作。虽然不能在旧的浏览器中使用，但我可能仍然会使用这种方法。

另一种适用于旧的浏览器的方法是放弃html5mode(true)的调用，改为在地址中使用带有hash+slash的方式：http://127.0.0.1:8080/test.html#/?target=bob。

相关文档可以在Developer Guide: Angular Services: Using $location找到。感谢这个问题的解答。我一直在为读取查询参数而苦苦挣扎。如你上面提到的，我一直得到'undefined'的结果。将模式设置为html5是有效的。

<body>标签的ng-controller属性应该设置为MyApp吗？

看起来从Angular 1.3开始，为了使用html5Mode，你还需要添加一个<base href="/" />标签，或者在调用html5Mode时添加requireBase: false作为另一个参数。详细信息请参见这里。

0
0 Comments

使用$routeProvider与

和的问题在于，当使用HTML5模式时，无法访问URL中的查询参数。解决方法是使用$location.search().target来获取'target'搜索参数。以下是一个可行的示例（已改进的jsFiddle代码）：

var myApp = angular.module('myApp', []);
function MyCtrl($scope, $location) {
    $scope.location = $location;
    $scope.$watch('location.search()', function() {
        $scope.target = ($location.search()).target;
    }, true);
    $scope.changeTarget = function(name) {
        $location.search('target', name);
    }
}



    Bob
    Paul
    
    
    URL 'target' param getter: {{target}}
    Full url: {{location.absUrl()}}

在这个示例中，使用$location.search().target获取URL中的'target'参数，并在页面上显示。通过点击按钮，可以更改'target'参数的值。

此外，需要注意的是，如果不使用HTML5模式，则只能访问或添加'#/'之后的参数。

需要注意的是，对于$location.search()方法，不需要在整个$location.search()表达式周围使用括号。

另外，这个问题的回答还提供了一个可行的jsFiddle链接作为参考。

使用$routeProvider与

和的问题是无法在HTML5模式下获取URL中的查询参数。解决方法是使用$location.search().target来获取查询参数，并进行相应的操作。

0
0 Comments

使用$routeProvider与

和存在的问题是，当使用

和提交表单时，无法使用$routeProvider获取参数。这是因为$routeProvider主要用于在AngularJS应用程序中进行路由和导航，而

和是传统的HTML表单提交方式，不会触发AngularJS的路由机制。

要解决这个问题，可以使用其他方式来获取表单的参数。一种方法是使用$location服务的search方法。$location服务是AngularJS提供的一个服务，用于获取和设置URL的各个部分，包括查询参数。通过调用$location.search()方法，可以获取表单提交时的查询参数。

下面是一个示例代码，演示如何使用$location.search()获取表单参数：

// 在控制器中注入$location服务
app.controller('myController', function($scope, $location) {
  // 使用$location.search()获取表单参数
  var searchParams = $location.search();
  // 获取参数的值
  var param1 = searchParams.param1;
  var param2 = searchParams.param2;
  // 打印参数的值
  console.log(param1);
  console.log(param2);
});

在上面的示例中，我们在控制器中注入了$location服务，并使用$location.search()方法获取表单参数。然后，我们可以通过查询参数的名称来获取其值，并将其打印到控制台上。

需要注意的是，使用$location.search()方法获取的参数是以对象的形式返回的，其中键是参数的名称，值是参数的值。

通过使用$location.search()方法，我们可以在不使用$routeProvider的情况下获取表单参数，解决了无法使用$routeProvider获取参数的问题。同时，$location.search()方法可以在控制器的任何时候调用，不仅限于控制器的初始加载。

总结起来，当使用

和提交表单时，如果需要获取表单参数，可以使用$location服务的search方法来获取。这样可以避免无法使用$routeProvider获取参数的问题。

0