Daniel Kabzon Daniel Kabzon - 2 months ago 24
AngularJS Question

ng-disabled overrides custom directive behavior

I'm developing the AngularJS client. I've got a custom directive used as an attribute. The directive checks the access level of the element and sets it to be disabled if the current user is not allowed to use it.

The problem begins when the same element has

ng-disabled
attribute. In this case the
ng-disabled
sets the ability of the element, never mind of what I set in my custom directive.

For example I have a button that should be disabled in case the form is invalid. At the same time I'd like to use my custom directive in order to set the button to be disabled if the user doesn't have a permition to use it.

<button ng-disabled="myFrm.myCtrl.$invalid" my-custom-directive="controlName"/>


Inside
myCustomDirective
I check if the named control is allowed to be activated by the user. If not - I set the disabled attribute to the element. But in case
myFrm.myCtrl.$invalid
is false
ng-disabled
removes the disabled attribute and the button is enabled.

Is there any solution to this problem? How can I prevent from ng-disabled to perform its operation?

Answer

Finaly I've found a solution to my problem. Instead of watching ng-disabled variable I've totaly diconnected the ng-disabled from its variable. In order to do it I've set the ng-disabled to be allways true in my own directive. My directive is an attribute, so after I've tried some different ways to do it, the solution was to add in my directive constructor the following code:

this.isDisabled = "true";
this.attrs["ngDisabl​ed"] = this.isDisabled;

It's very very important to set the this.isDisabled to "true" as a string and not boolean. Otherwise it doesn't work.

Comments