Angular ui-router url 问题答案

【问题标题】：Angular ui-router url issueAngular ui-router url 问题
【发布时间】：2014-04-17 13:37:08
【问题描述】：

我有一个搜索表单，类似于 (jade)：

div.search
   form.form-inline(role="form", method="get", ng-controller="searchFormController")
    div.row
     div.col-xs-2
      h3 Search
     div.col-xs-8
       input.form-control.input-lg(ng-model="searchTerm", ng-change="changed()", type='text' ,name="search" ,placeholder='enter your search ')#search
       |Your search terms:{{searchTerm}}
     div.col-xs-2
       a.btn.btn-danger.btn-lg(href="#/search")#searchSubmit Search 
  div.search_results(ui-view)

我的 ui-router 配置类似于：

$stateProvider
    .state('search', {
        url:'/search',
        templateUrl:'templates/search.html'
    })

这会加载search.html，它有一个控制器，可以将结果加载为JSON。我遇到的问题是这只能工作一次，即我不能多次单击搜索按钮来获得一组新的结果。此外，如果由于某种原因，它所在的页面的 url 没有最后一个“/”，则搜索也不会加载。

(1) 我如何确保这对localhost:3000 和localhost:3000\ 都有效 (2) 有什么方法可以清除网址，以便href=!"#/search" 多次工作？

【问题讨论】：

可能与ng-href有关

标签： angularjs angular-ui-router

【解决方案1】：

您可以将搜索值作为 GET 参数传递，并在控制器中读取。

搜索按钮：

<button type="submit" url="'#/home/search/?phrase={{queryString}}'"></button>

在控制器中使用$location 服务读取“短语”值

app.controller('searchResults', function ($scope, $location, $http) {
    $scope.queryString = $location.search().phrase;

});

更多请查看$location规范https://docs.angularjs.org/api/ng/service/$location

【讨论】：