AngularJS 设置禁用/启用按钮而不使用 ng-disabled 和 ng-click 动态生成的 html

Posted 2023-02-19

【中文标题】AngularJS 设置禁用/启用按钮而不使用 ng-disabled 和 ng-click 动态生成的 html

【英文标题】：AngularJS set disable/enable buttons without using ng-disabled and ng-click on dynamically generated html

【发布时间】：2017-08-14 13:43:25

【问题描述】：

我遇到了一个问题，如何在不使用 ng-disabled 和 ng-click 的情况下实现按钮刷新（启用/禁用）

我已经向我的指令发送了以下配置（一个或多个按钮）

buttonsConfig() 
  var button1 = 
    icon: '<i class="fa fa-check"></i>',
    name: button,
    actionEvent: () =>  this.openConfirm(); ,
    order: 1,
    active: false,
    large: true
    

这就是我如何动态制作 html 并检查禁用/启用按钮的配置文件

link: ng.IDirectiveLinkFn = ($scope: IActionBarScope, $element: ng.IAugmentedJQuery, $attrs: ng.IAttributes) => 
            var navbar = this.drawActionBar($scope.config);

            var padder = angular.element('<div id="padder" ng-if="action.isOpen"></div>');
            this.$compile(navbar)($scope);
            this.$compile(padder)($scope);

            $element.append(navbar, padder);
                

        setupButtonActions(element: ng.IAugmentedJQuery, config) 
            if (config.actionEvent != null) 
                if (config.active === false)  //skip undefined or true
                    element.addClass("disabled");
                 else 
                    element.removeClass("disabled");
                    element.mouseup(config.actionEvent);
                
            
        

在我的指令中，我在动态 HTML 网格 (CSS) 上生成 html 按钮（小/大），所以我不知道如何绑定该按钮启用/禁用。

在使用我的指令之前，我使用过：

<button ng-if="!ctrl.isReadOnly" type="submit" class="btn btn-flat btn-primary" ng-disabled="!ctrl.selectedAreReady()" ng-click="ctrl.openConfirm()"><i class="fa fa-check"></i> 'button' | translate</button>

这一切都是在 html 中静态完成的，没有编码，所以我通过 ng-disabled=ctrl.selectedAreReady() 发送按钮是否启用。

检查前（禁用按钮）

检查后（按钮已启用）

【问题讨论】：

你为什么不想使用ng-disabled？

因为我在指令中通过配置文件传递了我的数据，所以我想设置像 ng-disabled 这样的按钮的按钮很少，但不起作用

【参考方案1】：

如果你不想禁用ng，你可以使用javascript相关的API。

document.getElementById("myBtn").disabled = true;

如果要再次启用按钮，可以将其设置为 false

【讨论】：

你永远不应该像这样混合使用 Angular 和 Javascript/JQuery。

为什么我们不应该混合使用 Angular 和 javascript？

这不是混合 Angular 和 Javascript 的问题——毕竟 Angular 是 Javascript。但是 Angular 希望能够控制 DOM —— 每次范围数据更改时，Angular 都会覆盖上述直接 DOM 操作。

我用 angularJS ng-repeat hashMap 来散列值