I'm facing a challenge in implementing a button refresh feature (enable/disable) without relying on ng-disabled and ng-click.
I have passed the following configuration to my directive for 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 is how I dynamically generate HTML and check the configuration file for 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 create HTML buttons (small/large) within a dynamic HTML grid (CSS), making it challenging to bind whether the button is enabled/disabled.
Prior to using my directive, I relied on:
<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>
Everything was statically done in HTML, without coding. This way, through ng-disabled=ctrl.selectedAreReady(), I indicated if the button should be enabled or not.
Before checked(disabled button) https://i.sstatic.net/BlmGp.png
after checked (button enabled) https://i.sstatic.net/WVeot.png