кнопка внутри директивы не отключена

У меня есть указание служить формой кредитной карты. Эта форма может иметь много разных кнопок отправки. Во время покупки, которая является асинхронной, мне нужно убедиться, что кнопки отключены. Поэтому для этого я использую простой шаблон наблюдателя. Проблема, с которой я сталкиваюсь, заключается в том, что когда пользователь нажимает кнопку, шаблон наблюдателя работает нормально, атрибут изолированной области, управляющий 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


person user133688    schedule 19.12.2014    source источник
comment
Я не понимаю - вы звоните card.disableButtons() - что он делает? Это кажется важным для вопроса, но код для этого отсутствует.   -  person New Dev    schedule 19.12.2014
comment
Я добавил плюх. Он отлично работает, если вы отправляете хорошее имя, однако, если вы отправляете плохое имя, флаг отправки устанавливается в значение true, но отключено не устанавливается на кнопках. Вы можете увидеть это, если откроете консоль и посмотрите на вывод.   -  person user133688    schedule 19.12.2014


Ответы (1)


В вашем createCard.getCC() положительный случай возвращает неразрешенное обещание (оно разрешается позже с помощью $timeout), поэтому, пока обещание не разрешено, свойство submitting области submitCardButton имеет значение «истина», а кнопка отключена.

В отрицательном случае промис отклоняется сразу (синхронно), и поэтому времени на отключение кнопки нет — обработчик отклонения промиса сразу устанавливает submitting в false.

Если вы хотите увидеть эффект, измените отрицательный вариант использования на это:

if (!(user.firstname && user.lastname)) {
  $timeout(function() {
     defer.reject('bad user! bad!');
  }, 5000);
} 
person New Dev    schedule 19.12.2014
comment
Это решает проблему. Но установка ненужного тайм-аута кажется мне действительно глупой. Есть ли закономерность, когда ваши промисы могут быть либо синхронными, либо асинхронными? - person user133688; 20.12.2014
comment
Глупо конечно - я думал, что это макет какой-то. Вы хотите отключить кнопки на неопределенный срок? - person New Dev; 20.12.2014
comment
В реальном приложении они могут выбрать из списка возвращаемых объектов, чтобы он разрешился немедленно, или мы нажмем API, чтобы создать пользователя, и он может быть отклонен, или он не пройдет очистку, которая будет отклонена немедленно. В любом из этих состояний возврата кнопки должны быть снова включены. Так что это довольно близко издевается над реальным приложением. - person user133688; 20.12.2014
comment
Я предполагаю, что мой вопрос - что является триггером для повторного включения кнопки. - person New Dev; 20.12.2014
comment
Цель состоит в том, чтобы запретить пользователю отправлять несколько раз. Кнопки, которые будут повторно активированы при возврате любого из состояний обещания. Кстати, большое спасибо за вашу помощь :) - person user133688; 20.12.2014
comment
Что ж, как я уже говорил, некоторые промисы сразу отклоняются, так что в вашем случае это не сработает. более короткий тайм-аут может быть одним из способов предотвратить двойной щелчок пользователя; какое-то другое действие — например, оповещение — другое. Вам нужно выяснить, какие триггеры должны повторно активировать кнопку (но это был бы другой вопрос). - person New Dev; 20.12.2014