javascript - 指令内的按钮未被禁用

Question

我有一个用作信用卡表格的指令。这个表单可以有许多不同的提交按钮。在异步购买过程中，我需要确保禁用按钮。所以我使用一个简单的观察者模式来完成这个。我遇到的问题是，当用户单击一个按钮时，观察者模式工作正常，控制 ng-disable 的隔离范围属性设置正确，但是禁用未应用于按钮。我在想这可能是一个优先事项？

所以这是一个观察者。主题比较平凡。只需验证一个表单，并有一个观察者列表。这是我遇到问题的地方。

.directive('submitCardButton', ['$q', function ($q) {
  return {
    restrict: 'E',
    require: '^createCard',
    scope: {
      successBack: '&',
      buttonVal: '@'
    },
    template: "<button class='button button-pink full-width small-top' ng-class=\"{disabled: submitting}\" ng-click='getCC()' ng-disabled=\"submitting\">{+ submitting +} {+ buttonVal +}</button>",
    link: function (scope, elem, attr, card) {
      card.registerButton(scope);
      scope.submitting = false;

      function getCC () {
        card.disableButtons();
        card.getCC().then(function (response) {
          $q.when(scope.successBack({response:response}))
              .finally(card.enableButtons);
        }, function () {
            card.enableButtons();
        });
      }

      scope.disable = function () {
        scope.submitting = true;
        console.log(scope.submitting);
      };

      scope.enable = function () {
        scope.submitting = false;
        console.log(scope.submitting);
      };

      scope.getCC = getCC;
    } // end link
  };// end return 
}])// end directive

当我在 getCC 中调试时，在我调用 disableButtons 之后，提交设置为 true。然而，模板内的提交仍然是错误的，因此没有被禁用。任何帮助将不胜感激。

我创建了一个 plunkr 来演示我遇到的问题。我使用简单的用户名字姓氏来显示问题。如果您正确提交，它工作正常。但是，如果您只是提交而没有输入任何数据，您可以看到按钮指令中的提交标志设置为 True，但未正确设置禁用。 http://plnkr.co/edit/8KTUCNMPBRAFVl1N4nXp?p=preview

Answer 1

在您的 createCard.getCC() 中，正案例返回一个 Unresolved promise (稍后使用 $timeout 解决)，因此当 promise 未解决时， submitCardButton 范围的 submitting 属性为“true”，按钮被禁用。

在否定的情况下，promise 会立即(同步)被拒绝，因此没有时间禁用按钮 - promise 拒绝处理程序立即将 submitting 设置为 false。

如果想看效果，把负用例改成这样:

if (!(user.firstname && user.lastname)) {
  $timeout(function() {
     defer.reject('bad user! bad!');
  }, 5000);
}