Currently, I am utilizing the blur admin theme and exploring the possibility of using decorators to hide a button without directly modifying the HTML. Despite my efforts, I have been unable to successfully conceal the button. Can someone provide guidance on how to disable a button using decorators?
HTML:
<nav>
<ul class="pager ba-wizard-pager">
<li class="previous">
<button ng-disabled="$baWizardController.isFirstTab()" ng-click="$baWizardController.previousTab()" type="button" class=" btn btn-primary">
<span aria-hidden="true">←</span> {{ 'SECURE.NEW.PREVIOUS' | translate}}
</button>
</li>
<li class="next">
<button ng-disabled="$baWizardController.isLastTab()" ng-click="$baWizardController.nextTab()" type="button" class="btn btn-primary">
{{ 'SECURE.NEW.NEXT' | translate}}
<span aria-hidden="true">→</span></button></li>
</ul>
</nav>
Controller:
vm.isLastTab = function () {
return vm.tabNum == vm.tabs.length - 1 ;
};
Decorator applied:
function wizardConfig($provide) {
$provide.decorator("baWizardDirective", function($delegate, $controller) {
var directive = $delegate[0];
var controllerName = directive.controller;
directive.controller = function($scope) {
angular.extend(this, $controller(controllerName, {$scope: $scope}));
$scope.name = "from the decorator now";
};
return $delegate;
});
}