AngularJS set disable/enable buttons without using ng-disabled and ng-click on dynamically generated html

Question

I'm having a problem how to solve to implement buttons refresh (enable/disable) without using ng-disabled and ng-click

I've send to my directive the following configuration (one or more buttons)

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

Here it is how I made dynamically HTML and check the confing file of disabled/enabled button(s)

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);
                }
            }
        }

in my directive I generate html buttons (small/large) on dynamical HTML grid (CSS), so I do not know how to bind that button is enabled/disabled.

Before used my directive I used:

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

and it was all done static in html, without coding, so I sended through the ng-disabled=ctrl.selectedAreReady() that the button is enabled or not.

before checked(disabeled button)

after checked (button is enabled)

because I pass my data throut the config file in my directive, so there are few buttons where I want to set buttons like ng-disabled, but does not work — Andrej
– Andrej, Commented Mar 22, 2017 at 13:28

Pramod_Para · Accepted Answer · 2017-03-22 12:40:12Z

0

If your dont want ng-disabled, you can use javascript related API.

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

You can set it to false if you want to enable the button back again

answered Mar 22, 2017 at 12:40

Pramod_Para

6833 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Darren Wainwright Over a year ago

You should never really mix Angular and Javascript/JQuery like this.

Pramod_Para Over a year ago

why we should not mix angular and javascript?

Daniel Beck Over a year ago

It's not a matter of mixing Angular and Javascript -- Angular is Javascript after all. But Angular expects to have control over the DOM -- direct DOM manipulations such as the above will be overwritten by Angular every time scope data changes.

Andrej Over a year ago

I used like in angularJS ng-repeat hashMap to hash values

Collectives™ on Stack Overflow

AngularJS set disable/enable buttons without using ng-disabled and ng-click on dynamically generated html

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related