AngularJS UI 路由器和搜索答案

【问题标题】：AngularJS UI Router and searchAngularJS UI 路由器和搜索
【发布时间】：2016-10-19 04:47:06
【问题描述】：

我使用 AngularJS、UI Router 和 Elasticsearch 构建了一个小型搜索应用程序。我有 2 个共享 1 个控制器的模板。一切正常......除了我尝试实现查询参数时。

一个模板是一个简单的 hp，用于输入搜索查询或从自动完成中选择（UI Bootstrap Typeahead）。另一个模板用于搜索结果和更多搜索（搜索框和显示搜索结果的区域）。

我的状态如下所示：

.state('query', {//home
  url: '/',
  templateUrl: 'search/query.html',
  controller: 'searchCtrl as vm'
})
.state('search', {//results
  url: '/search?q',
  templateUrl: 'search/search.html',
  controller: 'searchCtrl as vm'
});

我正在使用 UI Router 中的 $state.go（在 searchCtrl 中）在状态之间进行转换。

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

发生的情况是，在您输入查询/选择自动完成后，它会进入“搜索”状态，但我看到这是在 url 中

http://localhost:8000/app/#/search?q=%5Bobject%20Object%5D

那我又要输入查询了，url变成了

http://localhost:8000/app/#/search?q=userinput

最后我必须再次输入查询才能执行搜索。显然，我希望所有这一切都发生在一次搜索提交中。我做错了什么？

有什么建议或想法吗？

更新我在一个单独的 run.js 文件中有这个

.run(['$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;

更新 2 无论我使用我的代码还是您的代码，我都会遇到同样的错误。似乎当我从“状态”转到“状态”时，由于$scope works in Angular 的方式，searchTerms 正在被重置。我不确定如何解决这个问题，因为我不确定那里提供的解决方案是否适用于controllerAs 语法。为 hp/query 页面设置一个 autocompleteCtrl 并为 searchTerms 注入一个 queryService 到每个控制器中会更明智吗？请多花一点时间来分叉 codepen，完成后会给您发送评论。

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案1】：

您使用的是哪个版本的 Angular 1？

我已经将一个非常快速和粗略的 codepen 与我认为您正在努力实现的目标组合在一起，让我知道这是否是您所追求的，以及它是否有帮助。

$stateProvider
  .state('search', {
    url: '/',
    controller: 'myController as vm',
    template: '<div class="row"><form ng-submit="vm.query()"><div class="col-sm-10"><input class="form-control" ng-model="vm.search"></div><div class="col-sm-2">   <button class="btn btn-sm btn-default" ng-click="vm.query()">Search</button></div></form></div>'
  })
  .state('query', {
    url: '/query?q',
    controller: 'myController as vm',
    template: '<div class="row">Query: {{vm.search}}</div>'
  });

$urlRouterProvider.otherwise('/');

更新新的 CodePen - Working Pen

由于某种原因，Angular 和 UI 路由器的顺序已更改。

【讨论】：

我使用的是 1.5，是的，看起来与我正在做的非常相似。唯一的区别是朝向底部的 2 个 $stateProvider 行。我在一个单独的文件中有类似的东西 - 我会发布问题的更新。
在我发布的代码笔中，您想要实现的目标是什么？为什么要将状态和参数分配给 rootScope？您可以将这些注入控制器并在实例化控制器时访问它们。
有什么理由不能使用相同的过程吗？抱歉，只是想弄清楚你想从使用 rootScope 中得到什么。
没有问题，我使用该代码是因为当我转换并开始使用 UI 路由器时它可以正常工作。我将尝试您提供的示例并将 $stateProvider 行放在我的 $states 之后。
太棒了，它有效！我已接受您的回答 - 感谢您的所有努力！

【解决方案2】：

您应该按如下方式使用 $stateParams：

.state('search', {//results
    url: '/search/:q',
    templateUrl: 'search/search.html',
    controller: 'searchCtrl as vm'
});

然后在您的控制器中，您可以注入$stateParams 并使用$stateParams.q 访问该参数的值。

希望这会有所帮助。

【讨论】：