Как отключить кнопку с помощью директивы ng-disabled без добавления дополнительного параметра в директиву ng-disabled? - PullRequest
Новая
       41

Как отключить кнопку с помощью директивы ng-disabled без добавления дополнительного параметра в директиву ng-disabled?

0 голосов
/ 06 декабря 2018

** КОРОТКАЯ ВЕРСИЯ **

В настоящее время я работаю над веб-проектом ASP.NET MVC с использованием AngularJS.В настоящее время у меня есть кнопка с директивой 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, например, ng-disabled = "main.isLoading || main.actionButtonDisabled".

** ДЛИННАЯ ВЕРСИЯ **

IВ настоящее время я работаю над веб-проектом ASP.NET MVC, используя AngularJS.Для выполнения определенных действий пользователи приложения должны открыть всплывающее окно (ngDialog) с формой в нем.Пользователь заполняет форму и затем нажимает на кнопку отправить (или нажимает Enter), и форма будет отправлена.Представление использует угловой контроллер (с машинописью).

Данные из формы отправляются на наш сервер, где они обрабатываются.Когда обработка завершена, серверная часть отправляет нам результат обратно.Результат содержит 3 элемента: логическое значение для успеха, массив (строк) для ошибок и массив строк для предупреждений.

  • Логическая переменная успеха сообщает нам, была ли операция успешно обработана, то есть форма была правильно заполнена и действие было разрешено.

  • В массиве ошибок есть ошибки, предназначенные для пользователя.Эти ошибки могут быть что-то вроде: «Вы не можете переместить элемент X в местоположение Y».Всякий раз, когда есть ошибки, действие было неудачным, и булевский успех будет ложным.

  • Массив предупреждений содержит предупреждения для пользователя, но наличие предупреждений не означает, что действие не выполнено.Таким образом, наличие предупреждений означает, что действие все еще может быть успешным.

Всякий раз, когда логический успех имеет значение true, мы закрываем всплывающее окно.Всякий раз, когда логическое значение false равно 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();
            }
        });

Теперь вот что мы хотим изменить:

Всякий раз, когда есть предупреждения, но успех bool верен, мы хотим, чтобы предупреждения былипоказано, держать всплывающее окно открытым и отключить кнопку действия.Теперь первые два не проблема.Проблема возникает, когда мы хотим отключить кнопку.

В настоящее время у нас есть следующая строка для кнопки: 

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

К сожалению, из-за ng-disabled используется что-то вроде 

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

или 

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

не работает.Технически, мы могли бы добавить еще одну переменную в область и добавить ее в предложение ng-disabled, но мы не хотим этого делать.В нашем приложении у нас есть много этих всплывающих форм, и мы не хотим добавлять новую переменную к каждой из них.

Мы также пытались использовать директиву, но это неt решить проблему отсутствия необходимости добавления другой переменной к каждой области.

Директива: 

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

Любые предложения приветствуются.

...