CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-ng-disabled
chiranjiv
chiranjiv

Reputation: 81

How to use custom directive in angularJs ng-disabled?

I have following directive defined.

limsApp.directive('isPermissionValid', ['Service', function(Service) {
    return {
        restrict: 'A',
        scope: {
            isPermissionValid: '='
        },
        link: function (scope, elem, attrs) {
           
            if (Service.hasPermissionFor(scope.isPermissionValid)) {
               elem[0].disabled = false;
            } else {
               elem[0].disabled = true;
            }
            
        }
    }
}]);

here is html code

<input is-permission-valid="['Create/Update']" type="text" id="label" ng-model="test.name">

This text field is disabled based on condition.

<button is-permission-valid="['Create/Update']" type="button" ng-click="save()" 
ng-disabled="!test.name" >Save</button>

but when there is already ng-disabled then this is not working. above button is always enabled. When i remove ng-disabled from above button then it is working fine when directive gives true. so how to disable text field or button when there is already ng-disabled in that element.

Thank you.

Upvotes: 0

Views: 527

Answers (1)

huan feng
huan feng

Reputation: 8633

There's no need to create an is-permission-valid directive in your scenario, you can directly combine the logic and pass it to ng-disabled attribute, something like:

ng-disabled="!test.name || !isPermissionValid"

Or maybe 1 variable to control is enough:

HTML:

ng-disabled="shouldDisableButton"

Controller:

$scope.shouldDisableButton = !test.name || !isPermissionValid

Upvotes: 0

Related Questions