指令中的按钮未被禁用

I have a directive to serve as a credit card form. This form can have many different submit buttons. During the purchase, which is async, I need to make sure that the buttons are disabled. So I'm using a simple observer pattern to accomplish this. The issue I'm having is that when the user clicks a button, the observer pattern is working fine the isolated scope attribute controlling the ng-disable is being set correctly, however the disabled isn't being applied to the buttons. I'm thinking it might be a priority thing?

我有一个指令作为信用卡表格。此表单可以有许多不同的提交按钮。在购买期间,这是异步的,我需要确保按钮被禁用。所以我使用一个简单的观察者模式来实现这一目标。我遇到的问题是,当用户单击一个按钮时,观察者模式正常工作,正确设置了控制ng-disable的隔离范围属性,但是禁用了按钮。我认为这可能是一个优先事项?

So heres an observer. The subject is rather mundane. Just validates a form, and has a list of it's observers. Here's where I'm having issues.

所以这是一个观察者。这个主题相当平凡。只需验证表单,并列出其观察者列表。这是我遇到问题的地方。

.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

When I debug, inside the getCC, after I call the disableButtons the submitting is set to true. Howerver the submitting inside the template is still false and therefore not disabled. Any help would be soooo much appreciated.

当我调试getCC时,在调用disableButtons后,提交设置为true。但是,在模板内提交仍然是错误的,因此不会被禁用。任何帮助都会非常感激。

I created a plunkr that demonstrates the issue I'm having. I'm using a simple user first name last name to show the issue. It works fine if you submit properly. However, if you just submit with out putting any data in, you can see that the submitting flag in the button directive is set to True, but the disabled is not being set properly. http://plnkr.co/edit/8KTUCNMPBRAFVl1N4nXp?p=preview

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

1 个解决方案

#1

In your createCard.getCC() the positive case returns an unresolved promise (it is resolved later with a $timeout), so while the promise is unresolved, the submitting property of submitCardButton's scope is "true" and button is disabled.

在你的createCard.getCC()中,肯定的情况会返回一个未解析的promise(稍后会以$ timeout解析),所以当promise未解析时,submitCardButton范围的提交属性为“true”并且按钮被禁用。

In the negative case, the promise is rejected right away (synchronously), and so there is no time for the button to be disabled - the promise rejection handler sets submitting immediately to false.

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

If you want to see the effect, change the negative use case to this:

如果要查看效果,请将否定用例更改为:

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

#1