Question

我试图使用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

ngDisabled是一个表达式，因此它应该是ngDisabled: '&'而不是'='，并且在您的模板中它应该是ng-disabled = "ngDisabled()"。

Answer 2

有人在评论中指出了解决方案，但很快就删除了他们的评论。无论哪种方式，谢谢未知的评论者，解决方案非常简单。我只需要在代码中包含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>

ng-transclude inside bootstrap disabled按钮

2 个答案: