如何在调用回调之前禁用按钮？答案

【问题标题】：How do I disable a button until callback is called?如何在调用回调之前禁用按钮？
【发布时间】：2016-08-26 13:30:16
【问题描述】：

我有一个带有按钮的联系表单，如果表单无效或未选择recaptcha，我想禁用该按钮。

<form name="contactForm" data-ng-controller="ContactCtrl" novalidate>
...
<input class="form-control" name="email" type="email" required data-ng-model="contactEmail">
...
<div class="g-recaptcha" data-callback="recaptchaCalled" data-expired-callback="recaptchaExpired" data-sitekey="PULBIC KEY"></div>
...
<input type="checkbox" data-ng-model="recaptchaValid" />
...
<button type="submit" ng-disabled="!recaptchaValid || !contactForm.$valid">Send</button>

这是表单的控制器，现在正在调用此回调，因为警报发生了。

app.controller('ContactCtrl', function($scope) {
    $scope.recaptchaValid = false;
    recaptchaCalled = function() {
        $scope.recaptchaValid = true;
        alert('pressed!');
    };
});

如果我输入了一个有效的电子邮件地址，该按钮将保持禁用状态（并且未选中复选框），然后我可以单击该复选框并再次启用、取消选中和禁用该按钮。 - 正确的行为。

如果我输入一个有效的电子邮件地址然后进行验证码，该按钮将保持禁用状态（并且未选中复选框）。

如果我做验证码然后输入有效的电子邮件，按钮启用（并且复选框被选中）。

如果我输入一个有效的电子邮件地址，然后进行验证码，然后返回并触摸表单并强制它重新验证，则按钮（和复选框）会正确执行它们的操作。

这似乎表明需要调用刷新。我无法在 jsfiddle 上解决这个问题，因为我无法进行角度工作。

我确实找到了这个：https://github.com/VividCortex/angular-recaptcha，以及关于如何集成它的这个：http://code.ciphertrick.com/2015/05/19/google-recaptcha-with-angularjs/，但它超出了顶部，我无法计算出我需要的位。

【问题讨论】：

你能发布你的代码吗？或者小提琴会很好
那么你到底想达到什么目的？禁用按钮直到回调完成或更新角度之外的角度变量？这是两个不同的东西。
重新设计的措辞 - 希望更好？
谢谢奈杰尔，好多了。

标签： javascript jquery angularjs validation

【解决方案1】：

收到回调并在控制器中设置变量后，您必须调用$apply() 函数。因为回调来自 Angular 外部，Angular 不知道它需要更新，所以你必须告诉它这样做。现在您可以在按钮上使用 ngDisabled 并将其链接到控制器中的变量，然后就完成了。

【讨论】：

$scope.$apply();就我而言。谢谢！！