javascript - ng-transclude inside bootstrap disabled button

Question

我正在尝试使用 Bootstrap 3 为具有加载状态的按钮创建指令。当按钮被禁用时，我得到一些我似乎无法识别的奇怪样式。下面我包含了我的代码。

指令.js

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

模板.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()".