javascript disabled attribute not working in angularJS?

Question

I have written the following line to add an disable attribute to an element in angular

angular.element(document.getElementsByClassName("pit")).setAttribute('disabled');

but it is not working and throwing an error:

angular.element(...).setAttribute is not a function

You should definitely use `ng-disabled` if you are using AngularJS. — ssc-hrep3, Jan 20 '17 at 12:46
yeah i too was thinking that but that element is dynamically created — abhit, Jan 20 '17 at 12:48

score 3 · Accepted Answer · answered Jan 20 '17 at 12:46

3

angular.element returns a jQuery/jQuery lite wrapped element, not the raw DOM element.

You can set it using jQuery methods:

angular.element(document.getElementsByClassName("pit")).attr('disabled', true);

This is not really the angular way though. Consider adding a service to provide values to ng-disabled, or directive to manage the disabled state.

answered Jan 20 '17 at 12:46

clinton3141

the element is dynamically created how can i use ng-disabled on it? – abhit Jan 20 '17 at 12:50
You can use [$compile](https://docs.angularjs.org/api/ng/service/$compile) to create dynamic elements which are still angular-able. Related question: http://stackoverflow.com/questions/15279244/dynamically-add-directive-in-angularjs – clinton3141 Jan 20 '17 at 12:57
i am trying to create frost screen effect whenever i click on a particular button all the contents should get blurred for that i have applied blur class on them(CSS) and I am then trying to disable thier functionalities in which case i am disabling them. so can u suggest me some other way to do so... – abhit Jan 20 '17 at 13:03
1

update your question if a jsfiddlerso we may help you. – Cleiton Jan 20 '17 at 13:04

score 2 · Answer 2 · answered Jan 20 '17 at 12:48

angular.element returns a jQuery or jqLite Object, both has an attr() function that you can use instead, so:

instead of:

angular.element(document.getElementsByClassName("pit")).setAttribute('disabled');

you should write:

angular.element(".pit").attr('disabled', 'disabled');

score 1 · Answer 3 · answered Jan 20 '17 at 12:45

1

Angular has built in jQuery, so you could just add

$(".pit").attr('disabled', true);

answered Jan 20 '17 at 12:45

strwoc

score 0 · Answer 4 · answered Jan 20 '17 at 12:46

0

angular.element(document.querySelector(".pit")).setAttribute('disabled',true);

answered Jan 20 '17 at 12:46

Hikmat Sijapati

1

Although this code might solve the problem, one should always consider adding an explanation to it. – BDL Jan 20 '17 at 13:57

score 0 · Answer 5 · answered Jan 20 '17 at 12:50

0

This statement will work only if the element is an input type

angular.element(document.getElementsByClassName("pit")).attr('disabled', true);

Or use ng-disabled directive. this is the best way to disable an element in angular.

answered Jan 20 '17 at 12:50

Punith Mithra

5 Answers5