指令调用之前的角度禁用答案

【问题标题】：Angular Disable Before Directive Call指令调用之前的角度禁用
【发布时间】：2014-11-24 15:25:58
【问题描述】：

我在 AngularJS 应用程序中遇到了一些挑战。我有一个用户可以填写的表格。当他们提交时，我从 Bower 下载的指令接管，在后台执行 POST，然后返回到我的范围函数以完成。我需要禁用被点击的按钮，并在他们点击提交按钮时显示加载 img。通常，在作用域中设置一个“更新”变量会解决这个问题：

    <input data-ng-disabled="form.isUpdating" type="submit" value="Submit"/>
    <img data-ng-show="form.isUpdating" src="/images/spinner.gif">

     $scope.saveForm = function (){
        $scope.form.isUpdating = true;
        // Do some stuff
        $scope.form.isUpdating = false;
     }

我的问题是我无法控制最初发生的事情，因为指令接管了，它无法访问我的范围。我可以弄乱代码，但如果我不必这样做，我宁愿不这样做。所以当我点击按钮提交时，在指令中的 POST 完成之前什么都不会发生，这对我的用户不利。

我无法在此处执行 ng-click 并将 form.isUpdating 设置为 true，因为这会立即使按钮被禁用，因此单击不会注册。据我所知，您不能同时使用 ng-click 和 ng-disabled。

谁能想到解决这个问题的好方法？

【问题讨论】：

我没有看到使用 ng-click 的任何问题。您在使用 ng-click 然后禁用 ng-click 上的按钮时遇到任何问题吗？
是的，根据我在使用 ng-click 设置变量时所读（和经历）的内容，即首先设置，因此将 form.isUpdating 设置为 true 会立即禁用表单，因此按钮已禁用，img 存在，但没有触发其他任何内容。
您如何配置/设置此第 3 方指令？ ngMousedown 将是 mousedown、mouseup、click、submit 事件序列中触发的第一个事件。你能包装一下 ngsubmit 吗？
在表单提交时指令接管我根本没有配置任何东西。只需提交表单即可。

标签： javascript angularjs angularjs-directive

【解决方案1】：

做你需要异步完成的事情。这会将其置于当前之外消化循环。像这样：

 $scope.saveForm = function (){
    $scope.form.isUpdating = true;
    $timeout(function () {
        //this will run outside the current
        //digest cycle, so the UI has a change of updating
        // while I'm working!
        // Do some stuff
        $scope.form.isUpdating = false;
    },0)
 }

希望对您有所帮助！

【讨论】：

这很好，但问题是在触发 saveForm 函数之前需要时间的代码正在运行。我需要在使用 saveForm 函数之前设置 isUpdating。
您的代码似乎表明 saveForm 函数是 curlpit。你能建立一个 plunk/fiddle 来说明你的问题吗，我可能会帮忙！
创建一个使用我的代码的按钮，并通过代码触发提交，我认为这是解决您的问题的最简单方法。