Question

当用户点击提交按钮时，我需要使用URL发送路由参数。

这是我的简单表格

<form action="#/chat/{{username}}">
    <input type="text" placeholder="enter a username..." ng-model="username" required  autofocus><br/>
    <input type="submit" value="submit">
  </form>

但这不起作用，因为'username'变量没有绑定，而是转到/chat/%7B%7Busername%7D%7D（有人告诉我为什么会发生这种情况）

目前，我所遵循的解决方法是使用超链接而不是提交按钮

 <div>
    <input type="text"  class="form-control" placeholder="enter a username..." ng-model="username" required  autofocus><br/>
    <a href="#/chat/{{username}}" class="btn btn-lg btn-primary btn-block"  >Start Chatting</a>
  </div>

但上述方法的问题是当用户按下ENTER键时它不起作用（因为它不是提交按钮）

那么实现这个目标的正确方法是什么？

Answer 1

标记：

<form ng-submit="onSubmit()">
  <input type="text" placeholder="enter a username..." ng-model="username" required  autofocus><br/>
  <button type="submit">submit</submit>
</form>

JavaScript控制器：

app.controller('ctrl', function($location) {
  $scope.username = '';
  $scope.onSubmit = function() {
    $location.url('/chat/' + $scope.username);
  };
});

或类似的东西：）

Answer 2

HTML：

<form ng-submit="onSubmit()">
  <input type="text" placeholder="enter a username..." ng-model="username"  required  autofocus><br/>
  <button type="submit">submit</submit>
</form>

控制器：

app.controller('ctrl', function($state) {
  $scope.username = 'example name';
  $scope.onSubmit = function() {
    $state.go('/chat/' + $scope.username);
  };
});

文件：

Angular Ui

$state.go('$scope.username') - will go to the state according to user name
$state.go('^') - will go to a parent state
$state.go('^.sibling') - will go to a sibling state
$state.go('.child.grandchild') - will go to grandchild state

堆叠上的另一篇文章：

$ location服务在angular.js框架上开箱即用，允许您管理位置对象（类似于纯JavaScript）。 $ state服务是ui-router模块的一部分，允许您在整个状态机视图管理中以高级模式管理路由。

如果你使用ui-router，你应该更喜欢使用$ state服务来管理状态/路由，因为状态抽象了路由的概念，你可以在不改变状态的情况下改变物理路径。

Stack Post

使用表单提交的URL发送routeparams

2 个答案: