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, Mar 22 '17 at 13:28

score 0 · Answer 1 · answered Mar 22 '17 at 12:40

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 '17 at 12:40

Pramod_Para

671
3
10

3

You should never really mix Angular and Javascript/JQuery like this. – Darren Wainwright Mar 22 '17 at 13:13
why we should not mix angular and javascript? – Pramod_Para Mar 22 '17 at 13:17
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. – Daniel Beck Mar 22 '17 at 13:37
I used like in angularJS ng-repeat hashMap to hash values – Andrej Mar 30 '17 at 11:14

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

1 Answers1