ng-transclude 内引导禁用按钮答案

【问题标题】：ng-transclude inside bootstrap disabled buttonng-transclude 内引导禁用按钮
【发布时间】：2016-06-02 08:09:40
【问题描述】：

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

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

【问题讨论】：

标签： javascript css angularjs twitter-bootstrap angularjs-ng-transclude

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：