Angular 输入类型提交不会阻止在 ng-click 上提交表单答案

【问题标题】：Angular input type submit don't prevent form submit on ng-clickAngular 输入类型提交不会阻止在 ng-click 上提交表单
【发布时间】：2016-06-07 15:06:14
【问题描述】：

我想要完成的只是在使用 AngularJS 单击提交按钮时显示“正在加载...”。我认为使用

应该很容易

<form ng-if="!export.buttonClicked">
   ... various input values without ng-model
   <input type="submit" value="Start export" class="btn btn-default" ng-click="export.buttonClicked=true;">
</form>
<div ng-if="export.buttonClicked">
   loading...
</div>

我怎么会这么错。似乎 Angular 会阻止像这样的默认表单提交。显示加载 div 工作得很好，但我需要提交表单（服务器必须计算很多，所以它响应缓慢，我想显示加载...而不是按钮一旦被点击）强>

我不能使用 ng-submit，因为我必须将 AngularJS 与 Razor 结合起来，而且我不想要 ng-form 或 ng-model...

有什么想法吗？

【问题讨论】：

请说明您想要达到的目标；目前还完全不清楚。
如果您不想使用 ng-form、ng-model 或 ng-submit，那么使用 Angular 有什么好处？只是为了显示“正在加载...”对话框？为什么不直接使用 js 或 jQuery？
@jbrown 因为它是一个与 Angular 混合的 MVC 应用程序，我不想在 jQuery 中混合，将 Angular 与 jQuery 混合被认为是一件丑陋的事情。
@Dmitriy Khudorozhkov 我想实现的目标在我的问题的第一行中说得很清楚？或者还有什么不清楚的地方......无论如何，我对代码进行了一些扩展以使其更清晰。
@Benedikt - 是的，我并不是建议将 jquery 与 angular 混合使用，我真的在质疑为什么您包含 angular 但不愿意按预期使用它。

标签： angularjs razor

【解决方案1】：

如果您有一个与页面或 div 相关联的角度控制器，只需在您的 ng-click 中使用一个函数，如下所示：

<div ng-controller="sampleController" style="text-align:center">
    <button ng-click="buttonClickedFunction()">Submit</button>
    <p>{{message}}</p>
</div>

然后在你的控制器中：

yourAppName.controller('sampleController', function($scope) {
    $scope.buttonClickedFunction = function() {
        $scope.message = "Loading...";
        // Whatever else you wish to do with your button/function.
    };
});

一旦单击按钮，这就会在屏幕上加载，如果这是您拍摄的目的吗？

【讨论】：

是的，但同时按钮必须是 type="submit" 并提交它所在的表单。
@Benedikt 你也可以使用github.com/cgross/angular-busy 并传入 $scope 变量。将 cg-busy 放在表单中，并在加载时附加必要的动画。否则，这也可以通过 Angular 中的 ajax 调用来完成
我知道 angular-busy 和类似的项目......我只是希望有一种简单的方法可以阻止 Angular 阻止表单提交。猜猜我真的必须走很长的路，做一个 $http 请求，并将 ng-model 添加到输入字段中，在初始加载时将它们映射到 Razor :( 不过谢谢！
@Benedikt 没问题，如果我的回答对您有任何帮助，请尽可能投票 :) 我认为可能有更简单的方法，但我自己没有研究过。
由于没有找到更好的解决方案，我只需要这样做，因为我担心使用 $http 并映射字段。虽然这不是我希望你提供的解决方案，但我将其标记为已接受的答案@NoReceipt4Panda