ng-transclude inside bootstrap отключена кнопка

Question

Im пытается создать директиву для кнопки с состоянием загрузки с помощью Bootstrap 3. Когда кнопка отключена, я получаю какой-то странный стиль, который я не могу определить. Ниже я включил свой код.

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> 

использования

<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

Кто-то указал решение в комментариях, но вскоре удалил их комментарий. В любом случае, спасибо неизвестному комментатору, решение было действительно простым. Мне просто нужно было указать код replace: true.

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> 

использования

<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 является выражением поэтому она должна быть ngDisabled: '&' вместо '=', и в вашем шаблоне должно быть ng-disabled = "ngDisabled()".