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。但是，模板内部的提交仍然是错误的，因此不会被禁用。任何帮助都会非常感激。

我创造了一个能够展示我所拥有的问题的傻瓜。我使用简单的用户名字来表示问题。如果你正确提交，它工作正常。但是，如果您只是在提交任何数据时提交，您可以看到按钮指令中的提交标志设置为True，但未正确设置禁用。 http://plnkr.co/edit/8KTUCNMPBRAFVl1N4nXp?p=preview

Answer 1

在你的createCard.getCC()中，肯定的情况会返回一个未解决的承诺（稍后会用$timeout解析），所以当promise未解析时，submitCardButton范围的submitting属性为“ true“和按钮被禁用。

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

如果要查看效果，请将否定用例更改为：

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

指令中的按钮未被禁用

1 个答案: