Question

**简短版本**

我目前正在使用AngularJS进行ASP.NET MVC Web项目。我目前有一个带有ng-disabled指令的按钮，我们想在该视图的打字稿控制器中将其禁用。当前，该按钮的以下行：

<button type="submit" id="btn-move" ng-show="main.actionType === 20" class="btn btn-primary" ng-disabled="main.isLoading">Move</button>

不幸的是，由于ng禁用，使用了类似

var actionButton = $("#btn-move");       
actionButton.disabled = true;

或

var actionButton = $("#btn-move");       
actionButton.prop("disabled", true);

不起作用。我们不想像ng-disabled =“ main.isLoading || main.actionButtonDisabled”那样向ng-disabled添加其他变量。

**长版**

我目前正在使用AngularJS进行ASP.NET MVC Web项目。要执行某些操作，应用程序的用户必须打开一个包含窗体的弹出窗口（ngDialog）。用户将填写表格，然后单击提交（或按Enter），表格将被提交。该视图使用Angular控制器（带有打字稿）。

来自表单的数据被发送到我们的后端，在此进行处理。处理完成后，后端会将结果发送回给我们。结果包含3个元素：表示成功的布尔值，表示错误的数组（字符串）和表示警告的字符串数组。

成功布尔值告诉我们操作是否成功完成，表示表格已正确填写且允许采取措施。
Error数组具有针对用户的错误。这些错误可能是类似于：“您不能将X项移动到位置Y。”每当有错误，操作不成功，成功布尔值将是错误的。
警告数组对用户有警告，但有警告并不表示操作已失败。因此，发出警告意味着行动仍然可能成功。

每当成功布尔值为true时，我们就会关闭弹出窗口。每当成功布尔值是false时，我们就不会关闭弹出窗口并向用户显示警告/错误。为此，我们使用以下代码：

private move = () => {
        var model = new Classes.InventoryItem.ManipulateStockOptions();
        model.articleId = this.articleId;
        model.quantity = this.quantity;
        model.locationFromId = this.locationId;

        this.inventoryItemService.manipulateStock(model).then((data: PerformActionResult) => {

            this.warnings = data.warnings;
            this.errors = data.errors;

            this.isLoading = false;

            if (data.success) {
                this.$scope.closeThisDialog();
            }
        });

现在，这是我们要更改的内容：

每当有警告但成功提示为true时，我们希望显示警告，保持打开的弹出窗口并禁用操作按钮。现在，前两个不是问题。当我们要禁用按钮时，问题就来了。

我们当前的按钮行如下：

<button type="submit" id="btn-move" ng-show="main.actionType === 20" class="btn btn-primary" ng-disabled="main.isLoading">Move</button>

不幸的是，由于ng禁用，使用了类似

var actionButton = $("#btn-move");       
actionButton.disabled = true;

或

var actionButton = $("#btn-move");       
actionButton.prop("disabled", true);

不起作用。从技术上讲，我们可以在范围内添加另一个变量，然后将其添加到ng-disabled子句中，但是我们不想这样做。在我们的应用程序中，我们有很多这样的弹出表单，我们不想为每个弹出表单添加一个新变量。

我们也尝试过使用指令，但这并没有解决不必向每个范围添加另一个变量的问题。

指令：

<button type="submit" id="{{btnid}}" class="btn btn-primary" ng-disabled="isLoading || actionButtonDisabled">
    {{label}}
</button>

使用此控制器

module App.Directives.ActionButton {

// #region interfaces

export interface IActionButtonScope extends ng.IScope {

    isLoading: boolean;
    actionButtonDisabled: boolean;
    label: string;
    btnid: string;
}

// #endregion

// #region directive

export class ActionButton implements ng.IDirective {

    public restrict = 'AE';
    public replace = true;
    public transclude = true;
    public templateUrl = Constants.TEMPLATE_URL + 'action-button.html';

    public $scope = {
        isLoading: '=',
        actionButtonDisabled: '=',
        label: '@',
        btnid: '='
    }
}

// #endregion

App.Module.directive('actionButton', [() => new ActionButton()])
}

并按以下方式实现：

  <action-button btnid="btn-move" ng-show="main.actionType === 10" isLoading="main.isLoading" label="Move"></action-button>

任何建议都将受到欢迎。

如何使用ng-disabled指令禁用按钮，而不向ng-disabled指令添加额外的参数？

0 个答案: