ng-transclude inside bootstrap 禁用按钮

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 禁用按钮

ng-transclude inside bootstrap disabled button

javascript

css

angularjs

twitter-bootstrap

angularjs-ng-transclude