使用 angularjs 提交表单的 GET 请求

Question

所以在学习了一点 AngularJS 之后，我能够让控制器调用 API 并将结果存储在一个变量中，然后显示在我的页面上（哇...）。如果我去：

http://127.0.0.1:3000/#/search

我看到带有提交表单但没有结果的页面，如果我转到：

http://127.0.0.1:3000/#/search?query=deep&learning

我看到带有提交表单的页面 + “深度与学习”查询的结果。问题是：我必须手动输入“?query=deep?learning”，我无法使用提交表单到达那里。我使用此代码：

<form name='input' action='#search' method='get'>
  <div class='input-group'>
    <input type='text'
           class='form-control'
           placeholder='Enter query.'
           name='query'>
    <div class='input-group-btn'>
      <button class='btn btn-default' type='submit'><i class='fa fa-search'></i></button>
    </div>
  </div>
</form>

通过这个提交表单，如果我在表单中输入“深度与学习”，我会进入

http://127.0.0.1:3000/?query=deep&learning#/search

如何更改我的代码，以便输入“深度与学习”让我：

http://127.0.0.1:3000/#/search?query=deep&learning

?

谢谢

UPDATE1：路线代码：

var myApp = angular.module('myApp', ['ngRoute'])
  .factory('myQuery', ['$http', function($http) {
    var doRequest = function(query) {
      return $http({
        method: 'GET',
        url: 'http://127.0.0.1:3000/api/v0/docs?search=' + query
      });
    };
    return {
      results: function(query) { return doRequest(query); }
    };
  }]);

myApp.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl : 'pages/home.html',
      controller  : 'mainController'
    })
    .when('/search', {
      templateUrl : 'pages/search.html',
      controller  : 'searchController'
    });
});

myApp.controller('mainController', function($scope) {
  // ...
});

myApp.controller('searchController', ['$scope', '$routeParams', 'myQuery', function($scope, $routeParams, myQuery) {
  myQuery.results($routeParams.query)
    .success(function(data, status, headers) {
      $scope.count = data.count;
      $scope.results = data.results;
    });
}]);

Answer 1

只需更改 action 属性值即可获得所需的 URL 格式。

换句话说：

<form name='input' action='search' method='get'>

请注意，目标 URI 不再以哈希为前缀。

当它以你现在拥有的哈希作为前缀时，它实际上相当于使用search作为页面锚将提交定向到根（即'/'）。