如何使用 angularjs 控制器变量设置表单的操作？答案

【问题标题】：How to set the action of a form using angularjs controller variable?如何使用 angularjs 控制器变量设置表单的操作？
【发布时间】：2019-04-26 14:40:45
【问题描述】：

我有这样的表格：

<form action="http://my-action-url">
...
</form>

如何包含使用变量来设置“动作”url 以等同于在我的控制器中说一个变量：

$scope.actionURL = "http://my-action-url";

我目前正在做：

<form action="{{actionURL}}">
...
</form>

但是，当我检查元素时，我看到操作标签是空的。

【问题讨论】：

您是否遇到任何控制台错误？
我没有看到任何控制台错误。当我点击提交按钮时，它实际上并没有发布到 url。当我检查特定表单时，我看到 action="" 并且没有填充预期的字符串。
如果您尝试在跨度中打印您的 actionURL 是否有效？分配任何其他范围变量并在跨度中打印它们是否有效？
我在您的代码中没有发现任何错误。见这个例子stackoverflow.com/questions/20552395/…
我看到了，但我注意到当我包含 http:// 时，它不起作用...

标签： angularjs

【解决方案1】：

这里是可用于使用 angularJs 范围变量在表单中设置操作的代码。我已成功运行此代码。请检查一下。

此处提交将不起作用，因为 stackoverflow 不允许提交。有关更多详细信息，您可以在控制台中看到此错误

 angular.module("test",[]).controller("testAction",testAction);
    function testAction($scope) {
    $scope.actionURL = "http://www.google.com";
    $scope.testD =  function() {
    	location.href = $scope.actionURL;
    };
}

 

<!DOCTYPE html>
<html>
<head>
 <script   src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
 </script>
</head>
<body ng-app="test">
 <div ng-controller="testAction">
   <form ng-submit="testD();">
     <input type="submit" >
     <div>{{actionURL}}</div>
   </form>
 </div>
</body>
</html>

【讨论】：

我的应用程序运行在...home-url。当我尝试你的答案时，（使用 target="_blank"，我看到它试图转到 home-url/""http://www.google.com""，这似乎不正确。

【解决方案2】：

你可以用

写表格

$sce.trustAsHtml(html);

你自己

编辑：更好地使用

<form action="{{trustAction(your post url)}}">

在你的范围内写

$scope.trustAction = function (actionURL) {
    return $sce.trustAsResourceUrl(actionURL);
};

【讨论】：

【解决方案3】：

你可以在这里看到https://docs.angularjs.org/api/ng/directive/form Angular 阻止操作，因此您必须使用 ng-submit 或 ng-click 如http://dojo.telerik.com/EmEki

【讨论】：

【解决方案4】：

我使用 jquery 选择器来设置表单动作。

<form method="post" name="deleteForm" action="#">
    <input type="hidden" name="_method" value="DELETE">
    <input type="hidden" name="_token" value="{{ csrf_token('delete') }}">
    <md-button ng-click="closeDialog()" class="md-raised md-primary md-button md-ink-ripple">
        Cancel
    </md-button>
    <md-button type="submit" class="md-raised md-warn md-button md-ink-ripple">
        Delete
    </md-button>
</form>

在我的控制器中：

$('form[name="deleteForm"]').attr('action', '/manager/card-design/' + cardDesign.id);

【讨论】：