ng-transclude inside bootstrap disabled button

Question

Im trying to create a directive for a button with a loading state using Bootstrap 3. When the button is disabled I get some strange style which I can't seem to identify. Below I included my code.

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>

usage

<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>

score 0 · Answer 1 · answered Jun 03 '16 at 05:47

0

ngDisabled is an expression so it should be ngDisabled: '&' instead of '=', and in your template it should be ng-disabled = "ngDisabled()".

answered Jun 03 '16 at 05:47

Xnake

940
7
8

score 0 · Accepted Answer · answered Jun 03 '16 at 07:46

Someone pointed the solution out in the comments but deleted their comment shortly after. Either way, thank you unknown commenter, the solution was really simple. I just needed to include replace: true to the code.

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>

usage

<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>

ng-transclude inside bootstrap disabled button

2 Answers2