ng-transclude innerhalb Bootstrap deaktiviert Schaltfläche

Question

Ich versuche, eine Direktive für eine Schaltfläche mit einem Ladezustand mit Bootstrap 3 zu erstellen. Wenn die Schaltfläche deaktiviert ist, bekomme ich einige seltsame Stil, die ich nicht zu identifizieren scheinen. Unten habe ich meinen Code eingefügt.

directive.js

function gfkLoadingButton(settings) { 
    return { 
     restrict: 'E', 
     transclude: true, 
     scope: { 
      isLoading: "=", 
      ngClass: "=", 
      ngStyle: "=", 
      loadingText: "=", 
      ngDisabled: '=' 
     } 
    }; 
} 

template.html

<button class="btn" 
     ng-class="ngClass" 
     type="button" 
     ng-disabled="ngDisabled" 
     ng-style="ngStyle"> 
    <span ng-show="!isLoading"> 
    <ng-transclude ng-disabled="ngDisabled"></ng-transclude> 
    </span> 
    <span ng-show="isLoading"> 
    <i class="fa fa-spinner fa-pulse"></i> 
    {{loadingText}} 
    </span> 
</button> 

Nutzung

<loading-button ng-class="'btn-primary'" 
       ng-style="{'width': '144px'}" 
       ng-disabled="addAdjustmentForm.$invalid || state.saving" 
       is-loading="state.saving" 
       loading-text="Saving"> 
    <span class="glyphicon glyphicon-plus"></span> 
    Add Adjustment 
</loading-button> 

Answer 1

Jemand zeigte die Lösung in den Kommentaren, löschte jedoch kurz danach ihren Kommentar. Wie auch immer, danke, unbekannter Kommentator, die Lösung war wirklich einfach. Ich musste nur replace: true zu dem Code hinzufügen.

directive.js

function loadingButton(settings) { 
    return { 
     restrict: 'E', 
     transclude: true, 
     replace: true, 
     scope: { 
      isLoading: "=", 
      loadingText: "=", 
      ngDisabled: '=' 
     } 
    }; 
} 

directive.html

<button class="btn" 
     type="button"> 
    <span ng-show="!isLoading"> 
    <ng-transclude ng-disabled="ngDisabled"></ng-transclude> 
    </span> 
    <span ng-show="isLoading"> 
    <i class="fa fa-spinner fa-pulse"></i> 
    {{loadingText}} 
    </span> 
</button> 

Nutzung

<loading-button ng-class="'btn-primary'" 
       ng-style="{'width': '143px'}" 
       ng-disabled="addCalculationForm.$invalid || state.saving" 
       is-loading="state.saving" 
       loading-text="'Saving'"> 
    <span class="glyphicon glyphicon-plus"></span> 
    Add Adjustment 
</loading-button> 

Answer 2

ngDisabled ist ein Ausdruck, so sollte es ngDisabled: '&' statt '=' sein, und in Ihrer Vorlage sollte es ng-disabled = "ngDisabled()" sein.