从表单访问角度页面答案

【问题标题】：Access an angular page from a form从表单访问角度页面
【发布时间】：2015-10-14 15:58:38
【问题描述】：

我想从 html 表单访问 Angular 页面。但是当我通过方法 get 和参数提交表单时，我的 url 出现了一些问题。

这是一个重现问题的简单表格：

<form action="http://ncel28182/pl/Angular/#/FFCO">
       <input type="text" name="test">
       <button>toto</button>
</form>

当我点击提交按钮时，它会打开一个 url 所在的页面

http://ncel28182/pl/Angular/?test=#/FFCO

参数好像放在#前面。

有办法解决吗？

【问题讨论】：

【解决方案1】：

我认为您应该使用 $location 来更改位置，并使用服务来共享数据，如下所示：

HTML：

<form name="myForm" ng-submit="submit()">
  <input type="text" name="test">
  <button>toto</button>
</form>

Javascript：

function submit($scope, $location, MyService) {
  MyService.data = $scope.myForm.test;
  $location.url("/pl/Angular/#/FFCO");
}

在对方的页面控制器中，将服务定义为依赖，就可以访问最新的数据了。

请注意，我不是专业的 angularjs 用户，甚至不是 webdeveloper，您可能应该等待其他用户对我的回答做出反应或添加他们自己的回答。

【讨论】：

我愿意，但该表格位于我未处理的网站中，不应更改。当我们提交表单时，此网站会重定向到我的网站。
@GuillaumeRahbari 您至少可以要求他们更改操作 URL 吗？如果是这样，在您的 Angular 应用程序中设置 $location 以使用 html5mode 可能会有所帮助，请参阅docs.angularjs.org/guide/$location#html5-mode
不幸的是我不能。我尝试了 html5mode 并没有解决问题：/
@GuillaumeRahbari 好的，因此 URL 将在某个时间点为 ncel28182/pl/Angular/?test=input#/FFCO，因为这是外部表单明确发送的内容。现在您需要拦截该请求并将其重定向到您想要的位置。首先，您需要在ncel28182/pl/Angular 收听一些东西，我猜您的 angularjs 应用程序已经这样做了。然后你需要它重新路由到你想要的地方。我认为 $location.html5Mode 会自行执行此操作，但如果不是，您可以强制执行此操作。
如果你已经在使用 ngRoute，我认为你应该为你想使用的路由创建一个“别名”，将传入的 url 指向你想要的视图。在其他情况下，只需使用 $location 根据需要重写 url 组件

【解决方案2】：

由于您无法编辑发送数据的表单，因此您无法使用 ngRoute 直接路由到所需的“FFCO”视图，因为 ngRoute 与 $location.path 匹配，而表单将“FFCO”部分作为$位置.hash。由于您没有提供 $location.path，因此该表单将针对您的应用程序根目录。

您要做的是在此页面中添加一些 js 代码来处理位置更改：

if ($location.hash() === "/FFCO") { $location.path("/FFCO"); }

这应该可以解决问题，将表单请求的 url 转换为 angularjs 应用程序可以理解的格式。我认为这不会改变哈希值，如果 URL 末尾的额外 #/FFCO 有问题，您应该使用 $location.hash('') 将其删除。

我认为最好的方法是在应用引导代码之后添加一个额外的控制器。

这显然仍然不是最理想的，我希望我有更好的解决方案。

【讨论】：