使用Angular.js按钮禁用发送多个表单 - 关闭表单

我想防止多种密封形式 angular.js. 问题与此相关。
https://coderoad.ru/15671335/
.

当用户点击发送形状按钮时，值 / 发送按钮标签应更改为 "loading..", 按钮状态将设置为禁用 AND 货件事件必须是通常的方式引起的，这将调用发送到服务器。 因此，用户将看到以下效果：

立即：值更改按钮 "loading.." 并获得有限的物理有限的客人

一旦服务器响应：用户收到服务器请求的结果 /虽然在没有干扰的情况下处理服务器响应 angular/

我创造了这一点
http://plnkr.co/edit/H8b5a8XzOCwgU0nvoEHy
, 展示我的意思。 我的问题属于这一行：
elm.attr/'disabled',true/;

. 这不仅禁用该按钮，还可以防止发送事件的分发。 所以我得到一个显示的按钮 /期望的结果/, 但表单不是发送的 /不需要的结果/.

如果您评论，您可以看到更改的行为 / Rassat此字符串：
elm.attr/'disabled',true/;


有想法如何改变它？
2021-03-23 添加评论
分享

没有找到相关结果

    已邀请:

    董宝中

    赞同来自:

    我有一个标准形式，我只是用 angular 在界面中，因此如果您只需要在服务器响应期间防止双按下按钮，那么您可以使用这种可以使用的简单指令重新使用，并且不需要控制器或 ngModel.

    http://plnkr.co/edit/2aZWQSLS8 ... eview

    app.directive/'clickOnce', function/$timeout/ {
    
 return {
    
 restrict: 'A',
    
 link: function/scope, element, attrs/ {
    
 var replacementText = attrs.clickOnce;
    

    
 element.bind/'click', function// {
    
 $timeout/function// {
    
 if /replacementText/ {
    
 element.html/replacementText/;
    
 }
    
 element.attr/'disabled', true/;
    
 }, 0/;
    
 }/;
    
 }
    
 };
    
}/;


    它将关闭按钮，如有必要，请更改按钮的文本。 像这样：


    <button click-once="">Button just disables</button>
    
<button click-once="Loading...">Text changes and button disables</button>


    其目前的表格只有在您执行标准形式的发送，而不是 ajax.
    2021-03-23 0 0
    分享

    郭文康

    赞同来自:

    只需为控制器添加新属性。


    $scope.processing = false;


    在你的方法中


    $scope.processData = function//{
    
 $scope.processing = true;
    
 $http.post/''/.then/function//{
    
 $scope.processing = false;
    
 }/;
    
}/;


    在你的 html 绑一个属性 ng-disabled 有一个物业 $scope.processing, 要在处理方法时禁用按钮并显示文本。
    2021-03-23 0 0
    分享

    龙天

    赞同来自:

    尝试 $timeout /功能 angularjs/


    $timeout/function//{
    
 elm.attr/'disabled',true/;
    
}, 0/
    2021-03-23 0 0
    分享

    喜特乐

    赞同来自:

    选择 /灵活的 & 简单的/ 决定 /

    / : 发送代码周围的函数shell建立了可变可见性区域。 看
    http://plnkr.co/edit/xNDMB9
    .

    在控制器中使用：


    $scope.submit = mutexAction/$scope, 'sending', submit/;


    洞察力：


    <form ng-submit="submit//">
    
 ...
    
 <button ng-disabled="sending">
    
 {{sending ? "Sending..." : "Send"}}
    
 </button>
    
</form>


    功能 /把它放在服务中/:


    function mutexAction/scope, semaphoreName, action/ {
    
 return function// {
    
 if /scope[semaphoreName]/ {
    
 // not queuing action, forget it!
    
 return;
    
 }
    
 scope[semaphoreName] = true;
    
 action//['finally']/function // {
    
 scope[semaphoreName] = false;
    
 }/;
    
 };
    
}
    2021-03-23 0 0
    分享

    董宝中

    赞同来自:

    补充到答案 spenthil, 变种 Coffee script + 如果需要，可以打开后退按钮 /例如，当形状检查失败时，您想再试一次/


    class ClickOnceDirective
    

    
 constructor: /@$timeout/ ->
    
 link = /scope, element, attrs/ =>
    

    
 originalText = element.html//
    
 replacementText = attrs.clickOnce
    

    
 element.bind/'click', =>
    
 @$timeout ->
    

    
 if /replacementText/
    
 element.html/replacementText/
    

    
 element.attr/'disabled', true/
    

    
 # enable back
    
 @$timeout ->
    
 element.attr/'disabled', false/
    
 if /replacementText/
    
 element.html/originalText/
    
 , 500
    

    
 , 0/
    

    
 return {
    
 link
    
 restrict: 'A'
    
 }
    

    
directivesModule.directive 'clickOnce', ['$timeout', ClickOnceDirective]
    2021-03-23 0 0
    分享

    风见雨下

    赞同来自:

    最简单，最常见的方法是依赖该属性。
    $submitted

    目的 form, 例如：


    <form name="formName" ng-submit="submit//">
    
 ...
    
 <button ng-disabled="formName.$submitted" type="submit">Submit</button>
    
</form>
    2021-03-23 0 0
    分享

    帅驴

    赞同来自:

    到底，我也参加了一个指示路线。 代替使用以下内容 ng-click 并期望传输的功能将返回承诺 /他在做什么 restangular/. 何时执行承诺 /答案将被退回/ - 这将允许随后的出货量。 您还可以将其配置为添加/删除 ng-disabled.


    // copied from ngClick and modified to provide single click only behavior
    
// expects function to return promise
    
app.directive/'srMutexClick', function /$parse/ {
    
 return {
    
 compile: function /$element, attr/ {
    
 var fn = $parse/attr['srMutexClick']/;
    
 return function srEventHandler/scope, element/ {
    
 var submitting = false;
    
 element.on/'click', function /event/ {
    
 scope.$apply/function // {
    
 if /submitting/ {
    
 return
    
 }
    
 submitting = true;
    
 // `submitting` is reset when promise is resolved
    
 fn/scope, {$event: event}/.finally/function// { submitting = false }/;
    
 }/;
    
 }/;
    
 };
    
 }
    
 };
    
}/;
    2021-03-23 0 0
    分享

    窦买办

    赞同来自:

    这是一种简单的方法来与简单的逻辑检查做同样的方法，文本更改也可以以相同的方式完成。


    <button class="btn btn-success btn-lg btn-block" ng-disabled="!userForm.$valid || isValid" type="submit">Submit!</button>
    

    

    
 $scope.isValid = false;
    
 $scope.submitForm = function // {
    
 $scope.isValid = true;
    
 console.log/'submit'/;
    
 }
    2021-03-23 0 0
    分享

    龙天

    赞同来自:

    以下是为所有请求执行此操作的一般方法。 AJAX 使用拦截器 $http.
    如果您有所有路线 REST, 陈述S. /api/, 然后：


    angular.module/'yourapp'/.factory/'loadingInterceptor',['$q','$rootScope',function/$q,$rootScope/ {
    
 var apiRe = /^\/api\//;
    
 return {
    
 request: function/config/ {
    
 if /config.url.match/apiRe// {
    
 $rootScope.loading = true;
    
 }
    
 config.headers = config.headers || {};
    

    
 return config;
    
 },
    
 response: function/res/ {
    
 $rootScope.loading = false;
    
 return $q.resolve/res/;
    
 },
    

    
 'responseError': function/rejection/ {
    
 $rootScope.loading = false;
    
 return $q.reject/rejection/;
    
 }
    
 };
    
}]/;
    

    

    
angular.module/'yourapp'/.config/['$httpProvider', function/$httpProvider/ {
    
 $httpProvider.interceptors.push/'loadingInterceptor'/;
    
}]/;


    使用拦截器，您不必插入 $scope.isLoading 在每个控制器中。 缺点是任何按钮 ng-disabled="loading" 在请求期间将被封锁。
    2021-03-23 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    Copyright © 2023, All Rights Reserved