Question

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

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

从主页转到结果页面，网址保持不变：

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

INSTEAD OF 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});

searchTerms没有单引号 AND $scope

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

Answer 2

因此，主页的网址为http://localhost:8000/app/home，搜索页面（结果页面）的网址为http://localhost:8000/app/search?q=searchTerms。

在家中，您需要提交查询以转到搜索结果页面。因此，搜索结果页面将在URL中包含queryParams。

如果您使用嵌套视图，则无关紧要。 URL在UI-Router中完全可配置。如果您不想在这些页面URL中查看查询参数。您可以将其作为非URL参数传递，以便您获取参数数据但在URL中看不到。 Check this了解有关非网址参数的更多信息。

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

2 个答案: