ui路由器查询参数

Question

我正在尝试学习如何在小型搜索应用程序中使用 AngularJS UI 路由器，但似乎无法正确获取查询参数。

在 Chrome 的地址栏中，它永远不会改变：

http://localhost:8000/app/search?q=searchTerms

而不是http://localhost:8000/app/search?q=typeduserinput

我有这个用于 .config 和 .run：

    searchApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {


    $locationProvider.html5Mode(true);/*for browser history, back and forward buttons*/

    $stateProvider
      .state('home', {
        url: '/home',
        //params: {'searchTerms': 'null'},
        templateUrl: 'home/home.html', controller: 'homeCtrl'})
      .state('search', {
        url: '/search?searchTerms',
        //url: '/search?q',
        params: {'q': 'searchTerms'},
        views: {
          '' : { templateUrl: 'search/search.html', controller: 'searchCtrl' }
          //add more views here when necessary
        }
      });
    $urlRouterProvider.otherwise('/home');

}]);
  searchApp.run(function ($rootScope, $location) {
    $rootScope = $location;
  });

所以我的主页现在真的很简单。只是一个提供自动完成功能的搜索框。

我的 homeCtrl 里有这个：

$scope.searchTerms = null;
$scope.searchTerms = $stateParams.searchTerms;

我的 ng-submit 按钮调用了一个 search()，其中包含以下代码：

$location.path('/search').search({'q': 'searchTerms'});//chaining location, state and url parameters

我在获取查询参数和 ui 路由器时哪里出错了？

更新 我一直在做大量的阅读，以更好地了解 UI 路由器如何适合我正在尝试做的事情。我想我现在开始“明白”了。我的第一个错误是我有 2 个控制器并且都将 ui.router 作为依赖项加载，这似乎导致 Error: Could not resolve '/search' from state 'home' 因为“搜索”状态尚未加载 - 只有 1 个可以将 ui.router 声明为依赖项 -但是，两个js文件都必须加载。

所以....我认为让 homeCtrl（自动完成）加载 ui.router 然后让 searchCtrl（搜索）加载 homeCtrl 是有意义的...这有意义吗，我理解正确吗？制作一个将 ui.router 作为依赖项加载的“路由”模块并让 homeCtrl 将路由模块作为依赖项加载会更好吗？

Answer 1

当您定义url: '/search?searchTerms', 时，这意味着search 状态接受名为searchTerms 的查询参数。

在state 定义中将名称更改为q：

url: '/search?q',

或将searchTerms 作为URL 中的查询参数传递：

http://localhost:8000/app/search?searchTerms=whateverYouWant

编辑：

当然，正如@sid 所说，您应该使用$state.go 在状态之间导航，而不是$location.path。

$state.go('search', {q: 'searchTerms'});

Answer 2

您似乎正在尝试将 ui.router 范例与直接使用 $location.path 混合。为什么不改用 $state.go('search') 。阅读：

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options

还有这个

https://stackoverflow.com/a/23455158/559095

此外，您在状态之间传递 searchParams 看起来不正确。通过以下链接可以更好地理解这一点。您可能需要在搜索状态下解析属性：

• https://stackoverflow.com/a/28248244/559095
• https://stackoverflow.com/a/23455158/559095