具有命名视图的 UI 路由器查询参数

Question

我在将查询参数与 UI 路由器一起用于小型搜索应用程序时遇到问题。

在我更好地理解 Angular 之前，它现在真的很简单，只是一个主页和结果页面。 主页上只有一个带有自动完成功能的搜索框。 搜索页面具有相同的搜索框，然后是结果。 在我的搜索框中，我在调用 search() 的按钮上有 ng-submit。 在 search() 中，我有 $state.go('state', {q: 'searchTerms'})，searchTerms 是我输入的 ng-model。

从主页到结果页面，url 保持不变：

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

代替http://localhost:8000/app/search?q=usertypedinput

为什么？

我的州（路线）

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

如您所见，我使用的是嵌套视图的命名视图 INSTEAD。 很多示例使用嵌套视图，所以我很想知道这是导致问题还是我遗漏了什么？

将嵌套视图与搜索应用程序一起使用会更好吗？

Answer 1

我想通了，除了 state.go 中的一些糟糕的语法外，一切都是正确的 :((

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

本来应该

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

没有单引号和$scope searchTerms

HTH 其他任何人都不会在这么简单的事情上浪费时间。

Answer 2

所以主页的 URL 是http://localhost:8000/app/home ，搜索页面（结果页面）的 URL 将是http://localhost:8000/app/search?q=searchTerms 。

从家里你提交查询去搜索结果页面。 因此，搜索结果页面的 url 中将包含 queryParams。

是否使用嵌套视图并不重要。 URL 在 UI-Router 中是完全可配置的。 如果您不想在搜索页面 URL 中看到查询参数。 您可以将其作为非 URL 参数传递，这样您将获得 param 数据但在 URL 中看不到。 检查此以获取有关非 URL 参数的更多信息。