按鈕裏面的指令不被禁用

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之後，submitting被設置爲true。保證模板內部的提交仍然是錯誤的，因此不會被禁用。任何幫助將非常讚賞。

我創建了一個演示我遇到的問題的plunkr。我正在使用一個簡單的用戶名姓來顯示問題。如果您正確提交，它工作正常。但是，如果您只是在不提交任何數據的情況下提交，則可以看到button指令中的提交標誌設置爲True，但禁用的設置不正確。 http://plnkr.co/edit/8KTUCNMPBRAFVl1N4nXp?p=preview

Answer 1

在你createCard.getCC()肯定的情況下返回一個未解決的承諾（它與$timeout後解決），因此，儘管許是未解決的submitCardButton的範圍submitting屬性爲「真」和按鈕被禁用。

在否定的情況下，承諾立即被拒絕（同步），因此沒有時間禁用按鈕 - 承諾拒絕處理程序立即將submitting設置爲false。

如果你想看到的效果，變消極使用情況如下：

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